浅谈npm 构建流程及package.json和 package.lock.json的工作流程

一、起因

在一次日常代码检视中，发现库上居然上了package-lock.json。这是静态记录版本所有依赖以及子依赖的文件。由于这个文件的版本第一次提交到目前9个月的时间都没有进行更新，在这期间，前端库有大大小小的package.json依赖库的升级，但是package-lock.json 这个文件却没有升级。于是我一个MR,删除了库上文件，本来是改动的开发版本。但是由于开发版本与构建版本在一台机器上，npm clean cache指令清除了机器上所有的缓存包，因此同时影响了发布版本的构建。造成库上node_modules中的子依赖项升级，导致部分兼容性问题。由于是版本发布前夕发现的问题，故影响较大。

二、分析

package.lock.json文件到底是什么文件？他的作用是什么？到底该不该上库？接下来就镇定思痛，赋能一波npm install过程，以及package.lock.json的作用。

1、语义化版本

在一探package-lock.json究竟之前，你必须要理解semver。它是npm背后的小小功臣。你可以从这里了解到npm是如何使用它的。概括来讲，假若你在开发一个可供其它应用使用的应用，你必须说明每次升级变更会对第三方使用产生哪些影响。这就是语义化版本想要传达的。一个版本有三部分：X, Y, Z，分别指代大版本，小版本，与查缺补漏版本。比如1.2.3，那么就是大版本1，小版本2，bugfix版本3。bugfix版本不会影响任何功能，小版本变更往往是增加新功能，也不会影响使用。而大版本变更往往会带来使用层面不兼容的情况，需要再做调整。（想想webpack每次升级的时候！）

2、npm 包管理

正是为了让包管理变简单，npm出现了。一个项目可能有上百个依赖，每个依赖又有上百个依赖。为了你不陷入依赖地狱，只需简单几行命令，npm就可以安装并管理这些依赖，大大节省了时间。

当你使用npm安装一个包(并保存它)的时候，package.json里就自动添加了一条信息，包括包名和其版本。npm当然也支持版本的通配符。npm默认安装最新版本，然后在其版本号之前添加一个^符号。比如 ^1.2.12，它表明最低应使用1.2.12版本，并且在这之上，拥有相同大版本号的任何版本都是OK的。毕竟小版本和bugfix版本不会对使用造成任何影响，所以用任何相同大版本的更高级版本都很安全。可以从这里了解semver通配符的更多信息，以及npm的semver计算器。

• 符号 ^ ：表示安装不低于该版本的应用，但是大版本号需相同，例如：vuex: "^3.1.3"，3.1.3及其以上的3.x.x都是满足的。
• 符号~：表示安装不低于该版本的应用，但是大版本号和小版本号需相同，例如：vuex: "^3.1.3"，3.1.3及其以上的3.1.x都是满足的。
• 无符号：无符号表示固定版本号，例如：vuex: "3.1.3"，此时一定是安装3.1.3版本。

3、为什么需要package-lock.json

npm install的输入是package.json，它的输出是一棵node_modules树。理想情况下，npm install<