前端项目包管理工具(npm&yarn)的规范使用
背景
yarn和npm是前端最常见的nodejs包管理工具, 咱们项目中有混用的情况(不是不可以, 要搞清原理), 国内的网络环境复杂, 以前最大的国内镜像CNPM域名发生变化后前端都遇到了证书错误的问题.
本文对两者的交叉使用做了介绍, 也对使用方法给出了建议.
npm 和 yarn 的简介
npm（Node Package Manager）：是
Node.js的包管理器，自2009年起伴随Node.js发布，目标是让JavaScript开发者轻松分享和重用代码。它支持安装和发布遵循CommonJS规范的包，是世界上最大的软件注册表，提供了丰富的JavaScript库和应用。Yarn：由Facebook、Google、Exponent和Tilde在2016年共同开发，旨在改进包的安装速度、安全性和依赖管理。
Yarn通过缓存和并行下载提高了性能，引入了yarn.lock文件来确保依赖版本的一致性。
性能和特性对比
- 安装速度：
Yarn由于其缓存和并行处理机制，在性能上通常比npm更快。 - 安全性：
Yarn在包安装前进行完整性校验，增强了安全性。 - 依赖管理：
npm使用package-lock.json，而Yarn使用yarn.lock文件来锁定依赖，两者都旨在确保项目依赖的一致性。 - 缓存机制：两者都提供了缓存机制，
npm从5版本开始自动缓存下载过的包，减少了重复下载的需要。
远程包服务器
- 共享的包注册表：
npm和Yarn默认都使用npm官方的包注册表（registry），意味着它们访问和下载的是相同的包和版本。 - 注册表配置灵活性：两者都允许用户配置使用不同的包注册表，包括设置为私有注册表，满足特定的项目需求或安全要求。
- 国内镜像: https://npmmirror.com/
配置文件加载顺序
两者的配置不交叉, 不互相读取, yarn的配置文件为.yarnrc, npm的配置文件为.npmrc, 都遵循最近原则, 离代码越近, 配置的优先级越高.
.yarnrc 加载顺序:
- 项目级别
.yarnrc - 用户级别
~/.yarnrc - 全局配置
yarn_root/config/.yarnrc
.npmrc 加载顺序:
- 项目级别
.npmrc - 用户级别
~/.npmrc - 全局配置
npm_root/config/.npmrc
需要注意点是, yarn和npm 各自只管自己的配置文件. 如果项目内有yarnrc, 无npmrc, 那么 yarn install 时, 找不到项目内的 yarnrc, 就会去找用户级别yarnrc, 再找不到就找全局级别的yarnrc. 总之就是不会找 npmrcs. npm install 也是同样道理会只关注自己的npmrc.
这也解释了为什么yarn安装证书出错之后, npm有可能安装成功.
配置文件: 特定包配特定源
项目中有配置xxx_mirror的情况, 比如electron_mirror, 这是因为支持二进制文件的独立映射, 以前国内镜像不完善的情况下有部分映射的需求.
这种做法现在不推荐, 此处只是作为介绍.
格式为 ${packageName}_mirror ${URL_mirror_package}
举例:
electron_mirror "https://registry.npmmirror.com/binary.html?path=electron/"
electron_builder_binaries_mirror "https://registry.npmmirror.com/binary.html?path=electron-builder-binaries/"
flow_mirror "https://registry.npmmirror.com/binary.html?path=flow/"
node_unofficial_builds_mirror "https://registry.npmmirror.com/binary.html?path=flow/"
配置命令
| command | description |
|---|---|
yarn config get proxy | 查看用户级别 HTTP 代理 |
yarn config get https-proxy | 查看用户级别 HTTPS 代理 |
yarn config set proxy http://localhost:1080 | 设置用户级别 HTTP 代理 |
yarn config set https-proxy http://localhost:1080 | 设置用户级别 HTTPS 代理 |
yarn config delete proxy | 删除用户级别 HTTP 代理 |
yarn config delete https-proxy | 删除用户级别 HTTPS 代理 |
yarn config list -l | 查看 yarn 的所有配置 |
npm config get proxy | 查看用户级别 HTTP 代理 |
npm config get https-proxy | 查看用户级别 HTTPS 代理 |
npm config set proxy http://localhost:1080 | 设置用户级别 HTTP 代理 |
npm config set https-proxy http://localhost:1080 | 设置用户级别 HTTPS 代理 |
npm config delete proxy | 删除用户级别 HTTP 代理 |
npm config delete https-proxy | 删除用户级别 HTTPS 代理 |
npm config list -l | 查看 npm 的所有配置 |
依赖安装以及lock
项目中, yarn和npm都以package.json作为自己的信息来源, 下载的包都会放到node_modules之下.
yarn诞生时候主打特性是本地缓存, 这要求有精确的版本对应, 引入了yarn.lock文件.
npm在5.0以后, 也引入了缓存和锁的机制. 以package-lock.json为版本锁.
锁文件中以源地址+版本号作为标识.
npm无视yarn.lock, 但是yarn会尊重package-lock.json的版本规则.
所以, 在CNPM镜像域名切换前的lock文件如果存在, 不论npm还是yarn都不会安装成功.
结论&共识
- 删除过期的镜像配置, 如果能翻墙, 是不需要配置镜像的.
- yarn 删除
yarn config delete registry - npm 删除
npm config delete registry --global
- yarn 删除
- 如果需要配置, 参照最后一节中的链接, 配置正确的url.
- 只需配置一个镜像, 不需要为electron之类二级二进制依赖单独配置.
- 统一使用yarn来安装应用.
- 原来有对已经停用npm镜像有依赖的项目, 还需要删除lock文件, 重新
yarn install生成lock后提交到代码管库.