什么是Yarn？
在 JavaScript 社區(qū)中作瞄，工程師們互相分享成千上萬的代碼茶宵，幫助我們節(jié)省大量編寫基礎(chǔ)組件、類庫或框架的時(shí)間宗挥。每個(gè)代碼包可能都依賴于其他代碼乌庶，而代碼間的依賴關(guān)系則由包管理器負(fù)責(zé)維護(hù)。目前最流行的 JavaScript 包管理器是 npm 客戶端契耿，在 npm 倉庫中提供了多達(dá) 30 萬的軟件包瞒大。據(jù)統(tǒng)計(jì)，已有超過 500 萬的工程師使用 npm 倉庫宵喂，其軟件包下載量達(dá)到了 50 億次/月糠赦。
在 Facebook 中，我們多年來一直在使用 npm 客戶端并取得了成功，但隨著代碼倉庫與團(tuán)隊(duì)人數(shù)的增長拙泽，我們在一致性淌山、安全性以及性能方面遇到了挑戰(zhàn)。在嘗試解決每個(gè)方面的問題后顾瞻，我們最終決定著手打造一套新的客戶端解決方案泼疑，以幫助我們更可靠地管理依賴。我們把這個(gè)客戶端工具稱為 Yarn —— 更加快速荷荤、可靠退渗、安全的 npm 客戶端的替代品。
我們在此榮幸地宣布蕴纳，我們與 Exponent会油、 Google 和 Tilde 進(jìn)行了合作，并開源 Yarn 項(xiàng)目古毛。工程師在使用 Yarn 時(shí)翻翩，依然需要訪問 npm 倉庫，但 Yarn
能夠更快速地安裝軟件包和管理依賴關(guān)系稻薇，并且可以在跨機(jī)器或者無網(wǎng)絡(luò)的安全環(huán)境中保持代碼的一致性嫂冻。Yarn 提高了開發(fā)效率，并解決了共享代碼時(shí)面臨的一些問題塞椎，使得工程師們可以專注在構(gòu)建新產(chǎn)品以及新特性上桨仿。
我們可以通過
npm install -g yarn
來安裝yarn包管理器。
Phoenix + Yarn
Phoenix + Brunch + Yarn
mix phoenix.new pxyarn
這里是否install依賴我們選擇no案狠。
根據(jù)phoenix自動生成的帶有brunch的package.json文件服傍，根據(jù)這個(gè)文件使用yarn來進(jìn)行npm模塊的安裝。
然后就是yarn登場啦骂铁！
? yarn install
yarn install v0.15.1
info No lockfile found.
[1/4] ?? Resolving packages...
[2/4] ?? Fetching packages...
[3/4] ?? Linking dependencies...
[4/4] ?? Building fresh packages...
success Saved lockfile.
? Done in 41.98s.
然后再安裝剩余的 mix 擴(kuò)展
mix deps.get
我們看一下空間占用：
對比 npm 的 phoenix 項(xiàng)目：
mix phoenix.new pxnpm
Fetch and install dependencies? [Yn] Y
在 Node 生態(tài)系統(tǒng)中伴嗡，依賴通常安裝在項(xiàng)目的 node_modules
文件夾中。然而从铲，這個(gè)文件的結(jié)構(gòu)和實(shí)際依賴樹可能有所區(qū)別，因?yàn)橹貜?fù)的依賴可以合并到一起澄暮。npm 客戶端把依賴安裝到 node_modules 目錄的過程具有不確定性名段。這意味著當(dāng)依賴的安裝順序不同時(shí)，node_modules 目錄的結(jié)構(gòu)可能會發(fā)生變化泣懊。這種差異可能會導(dǎo)致類似“我的機(jī)子上可以運(yùn)行伸辟，別的機(jī)子不行”的情況，并且通常要花費(fèi)大量時(shí)間定位與解決馍刮。
Yarn 通過 lockfiles 文件以及一個(gè)確定性的信夫、可靠的安裝算法，解決了版本問題和 npm 的不確定性問題。Lockfile 文件把安裝的軟件包版本鎖定在某個(gè)特定版本静稻，并保證 node_modules 目錄在所有機(jī)器上的安裝結(jié)果都是相同的警没。Lockfile 還使用簡潔的有序鍵名的格式，保證了每次的文件變化最小化振湾，進(jìn)行代碼審查也更為簡單杀迹。
Phoenix + Webpack + React + Yarn
使用Webpack之前，我們需要首先修改package.json
"dependencies": {
"react": "^15.4.0-rc.4",
"react-dom": "^15.3.2",
"react-router": "^2.8.1"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"history": "^4.3.0",
"react-hot-loader": "^3.0.0-beta.6",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
},
yarn install
你也可以自行添加依賴押搪，輸入 yarn add xxx 即可树酪。
yarn add react
yarn add webpack --dev
Refs
為什么我不使用 shrinkwrap（lock）
Facebook 發(fā)布了新的 Node 模塊管理器 Yarn，或取代 npm 客戶端
使用yarn 制作一個(gè)webpack + react 種子
