迁移 package-lock

[Realwate]

package-lock

package-lock.json会记录整个依赖树的版本、目录结构、包下载的地址等，有以下几点好处。

确定性

所有机器执行 npm install都能得到确定的dependencies，保证了CI,多人协作的一致性。

比如之前[email protected]的问题，因为本地开发环境和发布环境使用的webpack版本不同，在发布时出现webpack构建报错，这个问题可以更早的在开发环境暴露出来。

回溯

可以通过git还原某个版本的完整依赖关系，这在之前是做不到的。

之前如果要回退到三个月前的某个版本，虽然还原了package.json，但是因为是语义化版本(^)，某些包的minor release也可能带来break change，npm install npm start后，整个项目可能根本运行不起来，不知道哪个包出了问题。

方便diff

npm update更新包后，提交时可以通过 diff package-lock.json更直观的看到包版本的变化。

安装速度

npm可以根据 lock 跳过一些 metadata 的解析，提升安装速度。

registry和npm版本

不同npm版本，执行npm i生成的lock格式略有差异(测试发现5.6,6.4,6.9三个版本都有不同的地方)。package-lock.json中记录了包的下载地址，由registry决定。
如果团队每个人使用的 npm 版本和 registry 都不相同的话，在没有更新包版本的情况下，lock 文件也会经常变化更新，可能会产生不必要的冲突。

所以统一一下，使用 [email protected]，淘宝源。

# 查看当前registry
npm config get registry

# 手动设置registry
npm config set registry https://registry.npm.taobao.org
# 因为publish还是要发布到npm源 更新到[email protected]以上版本解决发版时的registry切换问题
# 或者自己手动使用nrm来切换

# 查看 npm 版本
npm -v

# 升级到6.9.0
npm i [email protected] -g

迁移步骤

我们原先的做法是，将package-lock.json加入到.gitignore，但是并没有配置npmrc，这样所有机器npm i时仍然会生成一份package-lock.json。为了把package-lock.json提交到git，需要做一些工作。

0. 确认 npm 版本为6.9.0
1. 确认 registry 为淘宝源，package-lock.json 中记录的也是淘宝源，而不是 npm（搜索 registry.npmjs.org）
2. 如果不是，rm -rf node_modules package-lock.json && npm i 生成新的 package-lock.json
3. .gitignore 中去掉 package-lock.json
4. 提交 .gitignore 和 package-lock.json

如果是重新生成package-lock.json，最好自己本地跑下(or 发布测试)，避免某个包升级可能带来的问题(小概率)，npm i后注意看下warning。

提交后，其他人将代码拉下来，npm i就能得到一样的依赖。

后续开发

确认自己的 npm 版本 和 registry 没问题。
使用package-lock.json后，npm install,npm update等一些命令会自动同步修改package-lock.json，所以如果要更新某个包，执行npm i [email protected]，提交代码的时候带上package-lock.json就行。

冲突解决

多人协作的场景下，package.json和package-lock.json可能会产生冲突。先手动的解决掉package.json的冲突，然后执行npm install --package-lock-only让 npm 自动的解决lock文件的冲突。

如果只是lock文件有冲突，可以通过安装 npm-merge-driver 解决，每次 git rebase 后会自动的调用 driver 来解决 lock 文件的冲突。

# 安装这个后 git 会自动的解决只有lock文件的冲突
npx npm-merge-driver install -g

参考

package-lock.json 需要写进 .gitignore 吗？
npm-package-locks