09、React系列之--使用yarn包管理工具

2017-01-24 本文已影响7453人 TigerChain

版权声明：本文为博主原创文章，未经博主允许不得转载。

PS:转载请注明出处
作者:TigerChain
地址:http://www.jianshu.com/p/f05eabdf3ab6
本文出自TigerChain简书

React系列教程

教程简介

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

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

最后完美解决