久国产精品自产自拍,日本一道一区二区

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

PS:轉載請注明出處
作者:TigerChain
地址:http://www.itdecent.cn/p/f05eabdf3ab6
本文出自TigerChain簡書

React系列教程

教程簡介

1、閱讀對象

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

2、教程難度

初級

正文

1、什么是yarn

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

2、yarn的特點

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

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

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

1、處理： Yarn 通過向代碼倉庫發(fā)送請求，并遞歸查找每個依賴項，從而解決依賴關系。
2、抓?。?接下來，Yarn 會查找全局的緩存目錄，檢查所需的軟件包是否已被下載。如果沒有，Yarn 會抓取對應的壓縮包，并放置在全局的緩存目錄中，因此 Yarn 支持離線安裝，同一個安裝包不需要下載多次。依賴也可以通過 tarball 的壓縮形式放置在源碼控制系統(tǒng)中，以支持完整的離線安裝。
3、生成：最后，Yarn 從全局緩存中把需要用到的所有文件復制到本地的 node_modules 目錄中。

npm 客戶端把依賴安裝到 node_modules目錄的過程具有不確定性。這意味著當依賴的安裝順序不同時，node_modules 目錄的結構可能會發(fā)生變化。這種差異可能會導致類似“我的機子上可以運行，別的機子不行”的情況，并且通常要花費大量時間定位與解決

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

3、安裝yarn

1、在mac平臺上

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

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

1、使用Homebrew安裝

前提是要安裝Homebrew

brew update
brew install yarn

2、配置環(huán)境變量
添加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環(huán)境下，win下面基本上類似

1、新建yarndemo目錄并進入此目錄

mkdir yarndemo
cd yarndemo

2、使用yarn init來初始化項目

yarn init

1、此命令和npm一樣，如果不配置的話一路回車就可以了,效果如下(此處我設置了作者和版權信息，你可以什么也不用設置)

yarn_init.png

2、我們來看看yarndemo目錄下發(fā)生了什么變化

yarndemo_director.png

我們可以看到和使用npm init結果是一樣，會創(chuàng)建一個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文件夾以外，還創(chuàng)建了一個yarn.lock文件。

yarn.lock文件

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

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

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這一節(jié):http://www.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",//本地服務器所加載的頁面所在的目錄
     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	安裝某個開發(fā)時依賴項目
npm update taco —save	yarn upgrade taco	更新某個依賴項目
npm install taco --global	yarn global add taco	安裝某個全局依賴項目
npm publish/login/logout	yarn publish/login/logout	發(fā)布/登錄/登出，一系列NPM Registry操作
npm init	yarn init	初始化某個項目
npm run/test	yarn run/test	運行某個命令，可以在script腳本中去配置

yarn安裝慢的問題

使用以下命令來查看當前的源，默認是：官網(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就應該快多了。

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、運行yarn --version檢查是否安裝成功，報如下錯

yarn-version-error.png

4、解決辦法

在命令行中運行以下命令:

mkdir ~/Library/Caches/Yarn

最后完美解決

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

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

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

1、什么是yarn

2、yarn的特點

3、安裝yarn

1、在mac平臺上

2、在win平臺上安裝yarn

3、Linux平臺下安裝yarn

4、yarn使用

5、yarn和npm命令對比

yarn安裝慢的問題

yarn采坑之旅

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

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

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

1、什么是yarn

2、yarn的特點

3、安裝yarn

1、在mac平臺上

2、在win平臺上安裝yarn

3、Linux平臺下安裝yarn

4、yarn使用

5、yarn和npm命令對比

yarn安裝慢的問題

yarn采坑之旅

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

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

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

1、什么是yarn

3、安裝yarn

1、在mac平臺上

3、Linux平臺下安裝yarn

4、yarn使用

5、yarn和npm命令對比

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