我不懂 npm 和 yarn

前几天我的 apple mini 到了,开箱愉快,对着 m1 架构的新设备,一顿骚操作和瞎配置,其中过程不必细说.在我准备下载electron的时候,我发现我根本不懂npm和yarn,我只是在简单的使用着这哥俩,我之前确实没正眼看过这哥俩.很抱歉.

npm和yarn都是前端的包管理工具,二者的区别在某种程度上毫无意义,选择其一作为我们的包管理工具吧.

启程

npm/yarn init -y 二者都会构建默认的package.json文件,区别在于:

# npm
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
# yarn
{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

提速

npm和yarn默认都使用官方的源,服务器在国外,下载速度相对来说肯定慢,而且还有神秘力量拦着,让人恼火却又无可奈何.如果你善用梯子且梯子牢固当我啥也没说.

为了提速,一般有如下两种思路:

• 临时提速

• 全局提速

临时提速

上去就是直接指定registry地址:

npm install axios --registry=https://registry.npm.taobao.org

全局提速

可以全局安装yrm来管理包的源配置.

npm i -g yrm
yrm use taobao

行吧,yrm居然是前辈i5ting (狼叔)写的...

yrm可以快速切换registry,还能测试各个仓库源的大致速度.我网络不好,sorry.

 ~/p/test yrm test

  npm ---- 5264ms
  cnpm --- 893ms
* taobao - 597ms
  nj ----- Fetch Error
  rednpm - Fetch Error
  npmMirror  Fetch Error
  edunpm - Fetch Error
  yarn --- Fetch Error

 ~/p/test 

如果仅仅需要快速换源,确实有用.但是当你用户目录下的配置文件有多个自己常用的配置的时候,就不合适了,毕竟它上来就一把梭,重写家目录下的配置文件.

纠错

npm和yarn都支持--verbose输出详细信息,可以发现许多错误信息.

这里提一下,有些情况下使用国内的源依然会出现部分下载 404 的情况.当你下载的模块依赖于C++模块需要编译,这时候通过node-gyp来编译,这货第一次编译依赖node源码,默认去nodejs.org/dist下载,一旦你的网络不稳定,还是凉凉.所以,可以在安装的时候指定--disturl,或者在配置文件里配好disturl即可.

配置

可以直接从cli命令行配置,例如上述的disturl:

npm config set disturl https://npm.taobao.org/mirrors/node

命令行配置有一个问题,举例:

npm config set aaa bbb

照样直接写入配置文件并输出设置成功信息...惊了.所以当你把disturl写成disurl,出错也是必然的.

也可以直接编辑配置文件,配置文件则有多个可以生效.跟很多unix的配置文件的一贯作风一样.如下层级依次生效:

• 工程内配置文件: /path/to/my/project/.npmrc,最优先.

• 用户级配置文件: ~/.npmrc

• 全局配置文件: $PREFIX/etc/npmrc (即npm config get globalconfig 输出的路径)

• npm内置配置文件: /path/to/npm/npmrc

我个人用户级配置文件用得多一点,上面提到的yrm也是直接改这个文件的配置.

锁定依赖版本,方便统一协作和后续的依赖安装,建议别改.

代理

不谈代理,建议肉身翻走.好吧,跟其他配置一样,可以指定本地代理协议和端口.或者设置 shell 全局代理.

缓存

我使用npm 7.0.15和yarn 1.22.10,安装模块默认就缓存模块到相关的目录下了,下次安装的时候也...默认不会管你的缓存.

npm的缓存机制支持add,clean和verify,前者用于添加和清理缓存,最后用于验证数据有效性,顺便清理垃圾数据.

即使可以通过npm config get cache得知缓存存放地址(大概位置,内部_cacache 目录一言难尽),也没法看缓存了那些包和版本号等信息,如果你知道请告诉我,多谢.

于是,我打算以后都用yarn了...

yarn支持:

yarn cache dir/list/clean

可以看缓存的位置和直接 list包,还能看到版本信息,比较方便.

利用缓存数据牵扯到包管理的其中一个功能:离线安装.离线安装支持三个选项:

• --prefer-online (default)
• --prefer-offline
• --offline

如果你之前缓存了部分包,后续还需要在别的project下安装依赖的话.默认走线上优先.三个选项一看就知无需解释,如果不指定版本,默认安装最新版.offline选项本地无缓存直接显示失败.

发布

如果要发布自己的包,则需要注册npmjs账号,并修改registry为默认源.

如果你发布之后发现有一些细微的修改,需要单独提交单个文件,不好意思不行,只能版本升级:

#小版本号升级
npm version patch
#中版号升级
npm version minor
#大版本号升级
npm version major

最后再npm publish.(我没做过,另外初次发文,请多包含,逃!)

更多内容建议参考如下链接和官方文档.

更多参考

• 2018 年了，你还是只会 npm install 吗？
• npm 模块安装机制简介 - 阮一峰的网络日志
• npm 依赖管理中被忽略的那些细节 - 政采云前端团队