npm依赖版本锁定和管理

[jiangtao]

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

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

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

  "vue-loader": "9.9.5",
  "vue-style-loader": "1.0.0",
  "vue": "2.1.8",
  "vue-template-compiler": "2.1.8"

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

1. 只发布编译后的文件

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

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

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

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

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

3. 包管理工具锁死

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

{
  "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": "[email protected]",
  "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 [email protected] && npm shrinkwrap	npm i -S [email protected]	yarn add [email protected]
更新	npm uni -S vue && npm I -S [email protected]	npm uni -S vue&& npm i -S [email protected]	yarn upgrade [email protected]
删除	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 [email protected] -S， 查看node_modules vue版本是2.2.0

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

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

1. 增加依赖

npm i [email protected] -S, npm-shrinkwrap.json 自动将vue-http及其依赖添加进去

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

3. 升级/降级依赖

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

4. 结果

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

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

yarn

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

1. 新增依赖

yarn add [email protected] [email protected]的时候，自动生成了 yarn.lock文件及其相关依赖

2. 删除依赖

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

3. 更新依赖

yarn upgrade [email protected]， 依赖更新成功， 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 [email protected] -S, 自动生成的package-lock.json 自动将vue-http及其依赖添加进去

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

3. 升级/降级依赖

npm up [email protected] -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版本中使用。

推荐阅读

• 从 npm 迁移