版權聲明：本文為博主原創文章，未經博主允許不得轉載。
PS:轉載請注明出處
作者:TigerChain
地址:http://www.lxweimin.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
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一樣，如果不配置的話一路回車就可以了,效果如下(此處我設置了作者和版權信息，你可以什么也不用設置)
- 2、我們來看看yarndemo目錄下發生了什么變化
我們可以看到和使用npm init結果是一樣，會創建一個package.json文件
3、添加依賴(以react為例子)
- 1、安裝依賴，使用yarn add命令
yarn add react react-dom
- 2、我們再來看看文件夾中目錄變化
我們可以看到除了和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.lxweimin.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+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檢查是否安裝成功，報如下錯
4、解決辦法
在命令行中運行以下命令:
mkdir ~/Library/Caches/Yarn
最后完美解決
