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

版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。

PS:轉(zhuǎn)載請(qǐng)注明出處
作者:TigerChain
地址:http://m.itdecent.cn/p/f05eabdf3ab6
本文出自TigerChain簡(jiǎn)書

React系列教程

教程簡(jiǎn)介

  • 1、閱讀對(duì)象

本篇教程適合初學(xué)者，老鳥直接略過，如果有誤，歡迎指出，謝謝。

  • 2、教程難度

    初級(jí)

正文

1、什么是yarn

yarn是facebook(2016年10月11日)開源的一款代替npm的js包管理工具

2、yarn的特點(diǎn)

相比于node的親兒子npm來說，yarn有以下優(yōu)勢(shì)

  • 1、安裝模塊速度快
  • 2、支持離線模式(只要你安裝過此模塊，第二次安裝就會(huì)從緩存文件中直接復(fù)制過來)
  • 3、同時(shí)兼容 npm 與 bower 工作流，并支持兩種軟件倉(cāng)庫(kù)混合使用

yarn安裝依賴的過程分為三步

  • 1、處理： Yarn 通過向代碼倉(cāng)庫(kù)發(fā)送請(qǐng)求，并遞歸查找每個(gè)依賴項(xiàng)，從而解決依賴關(guān)系。

  • 2、抓取： 接下來，Yarn 會(huì)查找全局的緩存目錄，檢查所需的軟件包是否已被下載。如果沒有，Yarn 會(huì)抓取對(duì)應(yīng)的壓縮包，并放置在全局的緩存目錄中，因此 Yarn 支持離線安裝，同一個(gè)安裝包不需要下載多次。依賴也可以通過 tarball 的壓縮形式放置在源碼控制系統(tǒng)中，以支持完整的離線安裝。

  • 3、生成： 最后，Yarn 從全局緩存中把需要用到的所有文件復(fù)制到本地的 node_modules 目錄中。

npm 客戶端把依賴安裝到 node_modules目錄的過程具有不確定性。這意味著當(dāng)依賴的安裝順序不同時(shí)，node_modules 目錄的結(jié)構(gòu)可能會(huì)發(fā)生變化。這種差異可能會(huì)導(dǎo)致類似“我的機(jī)子上可以運(yùn)行，別的機(jī)子不行”的情況，并且通常要花費(fèi)大量時(shí)間定位與解決

Yarn 通過 lockfiles 文件以及一個(gè)確定性的、可靠的安裝算法，解決了版本問題和 npm 的不確定性問題

3、安裝yarn

1、在mac平臺(tái)上

有多種方式，下面介紹兩種

1、第一種方式使用Homebrew安裝

  • 1、使用Homebrew安裝

前提是要安裝Homebrew

brew update
brew install yarn
  • 2、配置環(huán)境變量
    添加export PATH="$PATH:yarn global bin"到.profile或 .bashrc 或 .zshrc 文件中，以我的機(jī)子為例，打開.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平臺(tái)上安裝yarn

  • 1、下載yarn.msi文件

下載地址https://yarnpkg.com/latest.msi

  • 2、點(diǎn)擊一路安裝(前進(jìn)是你要安裝node)
  • 3、打開cmd輸入yarn --version查看是否安裝成功

3、Linux平臺(tái)下安裝yarn

這部分就不說了，非常簡(jiǎn)單，也是使用命令行安裝，具體可以看官方安裝方式https://yarnpkg.com/en/docs/install#linux-tab

4、yarn使用

yarn的使用方式和npm大廳相近，就是把npm的使用地方換成yarn并且添加三方模板組件使用是的yarn add xxx

我們來舉例說明yarn是如何使用的，建立一個(gè)簡(jiǎn)單的demo,以React HelloWorld 項(xiàng)目為例來說明(使用yarn+webpack+babel),在mac環(huán)境下，win下面基本上類似

1、新建yarndemo目錄并進(jìn)入此目錄

mkdir yarndemo
cd yarndemo

2、使用yarn init來初始化項(xiàng)目

yarn init
  • 1、此命令和npm一樣，如果不配置的話一路回車就可以了,效果如下(此處我設(shè)置了作者和版權(quán)信息，你可以什么也不用設(shè)置)
yarn_init.png
  • 2、我們來看看yarndemo目錄下發(fā)生了什么變化
yarndemo_director.png

我們可以看到和使用npm init結(jié)果是一樣，會(huì)創(chuàng)建一個(gè)package.json文件

3、添加依賴(以react為例子)

  • 1、安裝依賴，使用yarn add命令
yarn add react react-dom
yarn_add_react.png
  • 2、我們?cè)賮砜纯次募A中目錄變化
yarn-add-director.png

我們可以看到除了和npm install xxx --save 一樣新建一個(gè)node_modules文件夾以外，還創(chuàng)建了一個(gè)yarn.lock文件。

  • yarn.lock文件

yarn.lock 鎖定了安裝包的精確版本以及所有依賴項(xiàng)。有了這個(gè)文件，你可以確定項(xiàng)目團(tuán)隊(duì)的每個(gè)成員都安裝了精確的軟件包版本，部署可以輕松地重現(xiàn)，且沒有意外的 bug，并且這個(gè)文件可以使得程序在不同的機(jī)器上可以攻取一致的體驗(yàn)

Yarn 鎖定文件的和安裝算法的存在，確保了將應(yīng)用程序部署到生產(chǎn)環(huán)境時(shí)，安裝的依賴在開發(fā)機(jī)器之間，產(chǎn)生的文件和文件夾結(jié)構(gòu)完全相同。

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并輸入以下內(nèi)容(不理解的可以看webpack這一節(jié):http://m.itdecent.cn/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",//本地服務(wù)器所加載的頁(yè)面所在的目錄
     colors: true,//終端中輸出結(jié)果為彩色
     historyApiFallback: true,//不跳轉(zhuǎn)
     inline: true//實(shí)時(shí)刷新
   },
   //新增加部分
   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查看結(jié)果
yarn_hello.png

到此為止，我們就使用yarn+webpack+babel完成了一個(gè)簡(jiǎn)單的hello world demo,也體驗(yàn)了一下yarn的使用方式，和npm使用方式差不多，只不過命令不太一樣而已

5、yarn和npm命令對(duì)比

NPM YARN 說明
npm init yarn init 初始化某個(gè)項(xiàng)目
npm install/link yarn install/link 默認(rèn)的安裝依賴操作
npm install taco —save yarn add taco 安裝某個(gè)依賴，并且默認(rèn)保存到package.
npm uninstall taco —save yarn remove taco 移除某個(gè)依賴項(xiàng)目
npm install taco —save-dev yarn add taco —dev 安裝某個(gè)開發(fā)時(shí)依賴項(xiàng)目
npm update taco —save yarn upgrade taco 更新某個(gè)依賴項(xiàng)目
npm install taco --global yarn global add taco 安裝某個(gè)全局依賴項(xiàng)目
npm publish/login/logout yarn publish/login/logout 發(fā)布/登錄/登出，一系列NPM Registry操作
npm init yarn init 初始化某個(gè)項(xiàng)目
npm run/test yarn run/test 運(yùn)行某個(gè)命令，可以在script腳本中去配置

yarn安裝慢的問題

使用以下命令來查看當(dāng)前的源，默認(rèn)是：官網(wǎng)

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就應(yīng)該快多了。

yarn采坑之旅

1、安裝yarn，我采用npm來安裝(mac系統(tǒng))

1、全局安裝，這里有好多種安裝方式，我采用npm安裝

npm install yran -g

2、配置環(huán)境變量

export PATH="$PATH:$HOME/.yarn/bin"

將上述命令添加到你的.profile或.bashrc或是.zshrc或其它的文件中，我這里使用的是.zshrc

3、運(yùn)行yarn --version檢查是否安裝成功，報(bào)如下錯(cuò)

yarn-version-error.png

4、解決辦法

在命令行中運(yùn)行以下命令:

mkdir ~/Library/Caches/Yarn

最后完美解決

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容