版权声明：本文为博主原创文章，未经博主允许不得转载。
PS:转载请注明出处
作者:TigerChain
地址:http://www.jianshu.com/p/f05eabdf3ab6
本文出自TigerChain简书
教程简介
- 1、阅读对象
本篇教程适合初学者，老鸟直接略过，如果有误，欢迎指出，谢谢。
-
2、教程难度
初级
正文
1、什么是yarn
yarn是facebook(2016年10月11日)开源的一款代替npm的js包管理工具
2、yarn的特点
相比于node的亲儿子npm来说，yarn有以下优势
- 1、安装模块速度快
- 2、支持离线模式(只要你安装过此模块，第二次安装就会从缓存文件中直接复制过来)
- 3、同时兼容 npm 与 bower 工作流，并支持两种软件仓库混合使用
yarn安装依赖的过程分为三步
-
1、处理： Yarn 通过向代码仓库发送请求，并递归查找每个依赖项，从而解决依赖关系。
-
2、抓取： 接下来，Yarn 会查找全局的缓存目录，检查所需的软件包是否已被下载。如果没有，Yarn 会抓取对应的压缩包，并放置在全局的缓存目录中，因此 Yarn 支持离线安装，同一个安装包不需要下载多次。依赖也可以通过 tarball 的压缩形式放置在源码控制系统中，以支持完整的离线安装。
-
3、生成： 最后，Yarn 从全局缓存中把需要用到的所有文件复制到本地的 node_modules 目录中。
npm 客户端把依赖安装到 node_modules目录的过程具有不确定性。这意味着当依赖的安装顺序不同时，node_modules 目录的结构可能会发生变化。这种差异可能会导致类似“我的机子上可以运行，别的机子不行”的情况，并且通常要花费大量时间定位与解决
Yarn 通过 lockfiles 文件以及一个确定性的、可靠的安装算法，解决了版本问题和 npm 的不确定性问题
3、安装yarn
1、在mac平台上
有多种方式，下面介绍两种
1、第一种方式使用Homebrew安装
- 1、使用Homebrew安装
前提是要安装Homebrew
brew update
brew install yarn
- 2、配置环境变量
添加export PATH="$PATH:yarn global bin"到.profile或 .bashrc 或 .zshrc 文件中，以我的机子为例，打开.zshrc文件添加以下命令
export PATH="$PATH:$HOME/.yarn/bin"
- 3、查看是否安装成功
在命令行输入以下命令，能看到版本信息则证明成功
yarn --version
yarn_version.png
2、第二种方式使用npm安装
- 1、使用npm安装yarn
npm install yarn -g
- 2、步骤同Homebrew安装方式
- 3、步骤同Homebrew安装方式
2、在win平台上安装yarn
- 1、下载yarn.msi文件
下载地址https://yarnpkg.com/latest.msi
- 2、点击一路安装(前进是你要安装node)
- 3、打开cmd输入yarn --version查看是否安装成功
3、Linux平台下安装yarn
这部分就不说了，非常简单，也是使用命令行安装，具体可以看官方安装方式https://yarnpkg.com/en/docs/install#linux-tab
4、yarn使用
yarn的使用方式和npm大厅相近，就是把npm的使用地方换成yarn并且添加三方模板组件使用是的yarn add xxx
我们来举例说明yarn是如何使用的，建立一个简单的demo,以React HelloWorld 项目为例来说明(使用yarn+webpack+babel),在mac环境下，win下面基本上类似
1、新建yarndemo目录并进入此目录
mkdir yarndemo
cd yarndemo
2、使用yarn init来初始化项目
yarn init
- 1、此命令和npm一样，如果不配置的话一路回车就可以了,效果如下(此处我设置了作者和版权信息，你可以什么也不用设置)
yarn_init.png
- 2、我们来看看yarndemo目录下发生了什么变化
yarndemo_director.png
我们可以看到和使用npm init结果是一样，会创建一个package.json文件
3、添加依赖(以react为例子)
- 1、安装依赖，使用yarn add命令
yarn add react react-dom
yarn_add_react.png
- 2、我们再来看看文件夹中目录变化
yarn-add-director.png
我们可以看到除了和npm install xxx --save 一样新建一个node_modules文件夹以外，还创建了一个yarn.lock文件。
- yarn.lock文件
yarn.lock 锁定了安装包的精确版本以及所有依赖项。有了这个文件，你可以确定项目团队的每个成员都安装了精确的软件包版本，部署可以轻松地重现，且没有意外的 bug，并且这个文件可以使得程序在不同的机器上可以攻取一致的体验
Yarn 锁定文件的和安装算法的存在，确保了将应用程序部署到生产环境时，安装的依赖在开发机器之间，产生的文件和文件夹结构完全相同。
3、安装webpack和webpack-dev-server
yarn add webpack webpack-dev-server
4、安装babel
yarn add babel-core babel-preset-es2015 babel-preset-react babel-loader
5、在根目录中新建.babelrc并输入以下内容(不理解的可以看webpack这一节:http://www.jianshu.com/p/732c4d501668)
{
"presets":["react","es2015"]
}
6、在yarndemo目录中分别新建app和public目录
- 1、在public中新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>yarn demo</title>
</head>
<body>
<div id="container"></div>
<script src='./bundle.js'></script>
</body>
</html>
- 2、在app中新建main.js
import React from 'react' ;
import ReactDOM from 'react-dom' ;
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('container')
);
- 7、在根目录中新建webpack.config.js文件
module.exports = {
entry: __dirname +"/app/main.js",//唯一的入口文件
output:{
path: __dirname +"/public",//打包后文件存放的目录
filename:'bundle.js' //打包后输入的文件名
},
devServer:{
contentBase: "./public",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
//新增加部分
module:{
loaders:[
//babel配置
{
test:/\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
}
- 8、在package.json中添加script脚本
"scripts":{
"start":"webpack-dev-server --progress --port 8888"
}
- 9、命令行输入yarn start,打开浏览器，输入localhost:8888查看结果
yarn_hello.png
到此为止，我们就使用yarn+webpack+babel完成了一个简单的hello world demo,也体验了一下yarn的使用方式，和npm使用方式差不多，只不过命令不太一样而已
5、yarn和npm命令对比
| NPM | YARN | 说明 |
|---|---|---|
| npm init | yarn init | 初始化某个项目 |
| npm install/link | yarn install/link | 默认的安装依赖操作 |
| npm install taco —save | yarn add taco | 安装某个依赖，并且默认保存到package. |
| npm uninstall taco —save | yarn remove taco | 移除某个依赖项目 |
| npm install taco —save-dev | yarn add taco —dev | 安装某个开发时依赖项目 |
| npm update taco —save | yarn upgrade taco | 更新某个依赖项目 |
| npm install taco --global | yarn global add taco | 安装某个全局依赖项目 |
| npm publish/login/logout | yarn publish/login/logout | 发布/登录/登出，一系列NPM Registry操作 |
| npm init | yarn init | 初始化某个项目 |
| npm run/test | yarn run/test | 运行某个命令，可以在script脚本中去配置 |
yarn安装慢的问题
使用以下命令来查看当前的源，默认是：官网
yarn config get registry
# -> https://registry.yarnpkg.com
改成taobao的源
yarn config set registry 'https://registry.npm.taobao.org'
#yarn config v0.17.3
#success Set "registry" to "https://#registry.npm.taobao.org".
#✨ Done in 0.06s.
然后使用yarn install就应该快多了。
yarn采坑之旅
1、安装yarn，我采用npm来安装(mac系统)
1、全局安装，这里有好多种安装方式，我采用npm安装
npm install yran -g
2、配置环境变量
export PATH="$PATH:$HOME/.yarn/bin"
将上述命令添加到你的.profile或.bashrc或是.zshrc或其它的文件中，我这里使用的是.zshrc
3、运行yarn --version检查是否安装成功，报如下错
yarn-version-error.png
4、解决办法
在命令行中运行以下命令:
mkdir ~/Library/Caches/Yarn
最后完美解决
网友评论
1. webpack.config.js 中 devServer colors 属性设置后 yarn start 会出现报错，原因我没有查到。
2. webpack.config.js 中 module 配置下的 loader 属性不可以使用缩写，例如：loader: 'babel-loader'