npm依赖版本锁定和管理

发表于
文章已同步于源地址，欢迎讨论和关注. 本博客有图片不显示,可以查看源地址, 部分图片做了防盗链

前几天测试的时候遇到个问题，测试的时候出现依赖升级问题，由于测试同学是重新换了个机子，重装了环境，导致下载过程中依赖升级。npm带来便利的时候也带一些问题。如果您觉得比较啰嗦，直接看结果。

我们的vue项目最早依赖2.1.8版本做了组件和项目，为了保证产品的稳定性，决定锁死版本。可以参考这篇文章，介绍了框架升级分析的方法。

如果你也是使用vue可能需要注意以下依赖：

1
2
3
4
"vue-loader": "9.9.5",
"vue-style-loader": "1.0.0",
"vue": "2.1.8",
"vue-template-compiler": "2.1.8"

针对这种依赖升级解决方法：

  1. 只发布编译后的文件

这样测试同学就无需关心，升级依赖后再重新打包发布。

优点: 测试同学无需关注依赖安装
缺点: 产出目录充斥着各种版本的文件，增量存储repo越来越大

  1. 不通过包管理工具，直接把 node_modules打包，测试环境解压，每次升级依赖重新发布

开发直接把 node_modules 打成tar包, 部署的时候解压然后，再通过 npm run test打包测试. 一般现在一个项目一个node_modules打包后几十M（gzip之后），更新依赖之后解压。

好处： 无网络
坏处： 有一些c++的npm包，在不同的系统环境下是不同的，因此在osx下的node_modules，在Ubuntu失效。 好在我们的项目没有这种依赖包，所以也可以做一种方案。若有c++的包，则需要在本地装虚拟环境，如vagrant或docker跑测试对应的环境. 每当此时心里总是在想，咱还是前端开发吗[捂脸]

  1. 包管理工具锁死

node发展历程中出现了几种方式来做版本锁定, 以下面package.json为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "npm-lock",
  "version": "0.0.1",
  "description": "test dependies lock way",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "f2ecoder@vip.qq.com",
  "license": "MIT",
  "devDependencies": {},
  "dependencies": {
    "vue": "^2.2.0"
  }
}

没有下列命令的情况下, 查看 vue版本是 2.5.9, npm outdate没有输出，也就是最新版本。以下是三种锁定版本的方案，如果觉得文章啰嗦，可以直接查看表格比较：

- npm-shrinkwrap.json package-lock.json yarn.lock
命令 npm shrinkwrap 无 无
生成方式 需要命令生成 npm安装自动生成 yarn安装自动生成
npm版本 任意 >=5.0.0 任意
额外安装 无 无 yarn
增加依赖 npm i -S vue@2.1.8 && npm shrinkwrap npm i -S vue@2.1.8 yarn add vue@2.1.8
更新 npm uni -S vue && npm I -S vue@2.5.1 npm uni -S vue&& npm i -S vue@2.5.1 yarn upgrade vue@2.5.1
删除 npm uni -S vue npm uni -S vue yarn remove vue
发布 支持 不支持 支持
离线 不支持 不支持 支持
缓存 不支持 不支持 支持

npm shrinkwrap

为了确保我们使用的vue版本是2.2.0， 删除依赖，重新下载. 以下测试环境参数：

node: v6.10.2
npm: 3.10.10

npm i vue@2.2.0 -S， 查看node_modules vue版本是2.2.0

npm官方提供 npm shrinkwrap命令，生成 npm-shrinkwrap.json文件。

下面对依赖做增加，删除，修改的操作，看看 npm-shrinkwrap.json变化

1. 增加依赖

npm i vue-http@2.0.1 -S, npm-shrinkwrap.json 自动将vue-http及其依赖添加进去

2. 删除依赖
npm uni vue-http -S, 删除的时候自动删除npm-shrinkwrap.json中的vue-http及其依赖； 若忘了加 -S 或 -D， 则无法删除， 不够智能。

3. 升级/降级依赖

npm up vue-http@2.0.0 -S ，升级依赖，依赖没有升级，npm-shrinkwrap.json无更新，略显鸡肋。所以更新的话，直接通过上述方式删除，再添加吧。

4. 结果

把node_modules删掉，npm i， 依赖完美下载成功。

优点：npm天然支持
缺点：需要手动触发，update不生效

yarn

重新把npm shrinkwrap验证逻辑跑一遍.

1. 新增依赖

yarn add vue@2.2.0 vue-http@1.0.0的时候，自动生成了 yarn.lock文件及其相关依赖

2. 删除依赖

yarn remove vue-http, 自动删除依赖

3. 更新依赖

yarn upgrade vue-http@2.0.1， 依赖更新成功， yarn.lock版本更新成功

4. 结果

把node_modules删掉，npm i， 依赖完美下载成功。更重要的是， yarn会在本地缓存一份依赖，存储在 $HOME/.yarn-cache目录下，

存储文件的规则是： registry-package_name-version，下载前会检查缓存中是否命中，若命中直接从本地获取，因此速度更快。

优点: 通过yarn命令操作，可以自动更新yarn.lock，从缓存中读取速度快. 支持离线模式
缺点: 还需要在下载一个yarn命令

package-lock.json

package-lock.json是npm 5.0之后, 对应的node版本是8.0.0, npm下载的时候会自动的出现在目录中. 将Node升级到8.0.0进行以上测试.

1. 增加依赖

npm i vue-http@2.0.1 -S, 自动生成的package-lock.json 自动将vue-http及其依赖添加进去

2. 删除依赖
npm uni vue-http -S, 删除的时候，自动删除package-lock.json中的vue-http及其依赖； 不需要加 -S -D

3. 升级/降级依赖

npm up vue-http@2.0.0 -S ，升级依赖，依赖没有升级，package-lock.json无更新，。所以更新的话，直接通过上述方式删除，再添加吧。是npm update的问题

4. 结果

把node_modules删掉，npm i， 依赖完美下载成功。

优点：npm天然支持， 比较智能。
缺点：只有npm5.0之后支持，若低于8.0.0版本的node需要手动下载npm5. 另外package-lock.json不能发包。 因此官方给出可以通过 npm shrinkwrap把 package-lock.json重命名为 npm-shrinkwrap.json.

总结

对比总结，采用yarn管理，好处除了安装一个依赖之后，版本锁定智能，下载一次后速度快。yarn使用的包也是npm上的包可以在各个node版本中使用。

推荐阅读