在拉钩教育偶然看到了前端基础建设相关的教程，学习时候就顺便记录一下前端团队在基础建设方面的一些工作。

Yarn

Yarn 发布于 2016 年 10 月

yarn 是 Facebook，Google，Exponent 和 Tilde 构建的 javascript 包管理器

Yarn 可以通过 synp 工具将 yarn.lock 转换为 package-lock.json

由于 yarn 的全局安装位置与 npm 不同，所以要配置 yarn 的全局安装路径到环境变量中，否则全局安装的包不起作用。 具体操作如下

安装 yarn 后执行 yarn global dir 命令,获取 yarn 全局安装位置。 将该位置配置到电脑环境变量中

Yarn 的安装和使用

yarn 通过 npm 来安装

1
2
npm install -g yarn

Yarn 解决了什么问题？

  • 解决当时 npm 包下载速度过慢，完整性和一致性问题
  • 网络性能更好：Yarn 采用了请求排队的理念，类似并发连接池，能够更好地利用网络资源；同时引入了更好的安装失败时的重试机制。
  • 采用缓存机制，实现了离线模式（npm 目前也有类似实现）。
  • 确定性：通过 yarn.lock 等机制，保证了确定性。即不管安装顺序如何，相同的依赖关系在任何机器和环境下，都可以以相同的方式被安装。（在 npm v5 之前，没有 package-lock.json 机制）

Yarn 和 npm 常用命令的对比

初始化项目

-y 参数表述会以当前全局默认配置生成一个 package.json 文件，不加的话会进入交互式创建描述文件，-y 就是 yes 的简写

1
2
3
4
yarn init -y
npm init -y

提示:如果执行yarn init出现Can't answer a question unless a user TTY错误，请不要使用git bash初始化项目，除非在后面增加 -y参数
下载项目的所有声明的依赖:
1
2
3
yarn 或者 yarn install
npm install

下载指定的开发时依赖

-D 是–save-dev 的简写，表示安装在运行时依赖中。-S 是–save 简写，表示安装在生产环境中使用的包。以来安装好后，除了 node_modules 目录，yarn 会生成一个 yarn.lock 文件，而 npm 会生成一个 package.lock 文件

1
2
3
4
5
6
7
yarn add webpack@1.15.0 -D
npm install webpack@1.15.0 -D

# 全局安装
yarn global add webpack@1.15.0
npm install webpack@1.15.0 -g

卸载指定开发依赖
1
2
3
4
5
6
7
8
yarn remove webpack
npm uninstall webpack

# 全局卸载
npm uninstall webpack -g
yarn global remove webpack

以上都会更新package.json，yarn.lock或者package.lock文件

Yarn 的常用命令

查看版本

1
2
yarn -v

Yarn 区别于 npm 所特有的命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 依据原npm安装后的node_modules目录生成一份yarn.lock文件
yarn import

// 列出已安装包的许可证。
yarn licenses

// 创建一个压缩的包依赖 gzip 档案并命名为 filename。
yarn pack —filename <filename>

// 显示有关一个包为何被安装的信息。
yarn why <query>

// 从包依赖里清除并移除不需要的文件。
yarn autoclean

Yanr 的安装机制

  • 检测包：检测是否存在 npm 相关文件，比如 package-lock.json，检查 OS,CPU 等
  • 解析包： 先获取当前项目中的 package.json 定义的内容
  • 获取包：检查缓存中是否存在当前依赖包，将不存在的下载到缓存目录
  • 链接包：将项目中依赖复制到 node_modules 中
  • 如果依赖包中存在二进制包的进行编译

查看 Yarn 缓存目录

yarn 会优先采用网络资源，网络资源请求失败会使用本地缓存.
我这里 window 系统会默认安装在 C:\Users\Administrator\AppData\Local\Yarn\Cache\v6 这个目录中

1
2
yarn cache dir