什么是Yarn？

在 JavaScript 社区中，工程师们互相分享成千上万的代码，帮助我们节省大量编写基础组件、类库或框架的时间。每个代码包可能都依赖于其他代码，而代码间的依赖关系则由包管理器负责维护。目前最流行的 JavaScript 包管理器是 npm 客户端，在 npm 仓库中提供了多达 30 万的软件包。据统计，已有超过 500 万的工程师使用 npm 仓库，其软件包下载量达到了 50 亿次/月。

在 Facebook 中，我们多年来一直在使用 npm 客户端并取得了成功，但随着代码仓库与团队人数的增长，我们在一致性、安全性以及性能方面遇到了挑战。在尝试解决每个方面的问题后，我们最终决定着手打造一套新的客户端解决方案，以帮助我们更可靠地管理依赖。我们把这个客户端工具称为 Yarn —— 更加快速、可靠、安全的 npm 客户端的替代品。

我们在此荣幸地宣布，我们与 Exponent、 Google 和 Tilde 进行了合作，并开源 Yarn 项目。工程师在使用 Yarn 时，依然需要访问 npm 仓库，但 Yarn
能够更快速地安装软件包和管理依赖关系，并且可以在跨机器或者无网络的安全环境中保持代码的一致性。Yarn 提高了开发效率，并解决了共享代码时面临的一些问题，使得工程师们可以专注在构建新产品以及新特性上。

我们可以通过

npm install -g yarn

来安装yarn包管理器。

Phoenix + Yarn

Phoenix + Brunch + Yarn

mix phoenix.new pxyarn
这里是否install依赖我们选择no。

根据phoenix自动生成的带有brunch的package.json文件，根据这个文件使用yarn来进行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 扩展

mix deps.get

我们看一下空间占用：

对比 npm 的 phoenix 项目：

mix phoenix.new pxnpm
Fetch and install dependencies? [Yn] Y

在 Node 生态系统中，依赖通常安装在项目的 node_modules
文件夹中。然而，这个文件的结构和实际依赖树可能有所区别，因为重复的依赖可以合并到一起。npm 客户端把依赖安装到 node_modules 目录的过程具有不确定性。这意味着当依赖的安装顺序不同时，node_modules 目录的结构可能会发生变化。这种差异可能会导致类似“我的机子上可以运行，别的机子不行”的情况，并且通常要花费大量时间定位与解决。

Yarn 通过 lockfiles 文件以及一个确定性的、可靠的安装算法，解决了版本问题和 npm 的不确定性问题。Lockfile 文件把安装的软件包版本锁定在某个特定版本，并保证 node_modules 目录在所有机器上的安装结果都是相同的。Lockfile 还使用简洁的有序键名的格式，保证了每次的文件变化最小化，进行代码审查也更为简单。

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 发布了新的 Node 模块管理器 Yarn，或取代 npm 客户端
使用yarn 制作一个webpack + react 种子