package 与 package-lock文件的区别

我们首先来看一下package.json文件里的内容

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8081",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ant-design-vue": "^1.3.10",
    "axios": "^0.19.0",
    "core-js": "^3.4.3",
    "crypto-js": "^3.1.9-1",
    "moment": "^2.24.0",
    "nprogress": "^0.2.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.1",
    "@vue/cli-plugin-eslint": "^4.1.1",
    "@vue/cli-service": "^4.1.1",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-import": "^1.12.0",
    "eslint": "^5.16.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "lint-staged": "^9.4.3",
    "vue-template-compiler": "^2.6.10",
    "webpack-bundle-analyzer": "^3.4.1"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "repository": {
    "type": "git",
    "url": "xxxxxxx"
  }
}

再看下package-lock文件里的内容

{
  "name": "oss-frontend",
  "version": "0.1.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@ant-design/icons": {
      "version": "1.1.16",
      "resolved": "http://registry.npm.baidu-int.com/@ant-design%2ficons/-/icons-1.1.16.tgz",
      "integrity": "sha1-rGQmIWk04/S8EI8vSPku1meJI14="
    },
    "@ant-design/icons-vue": {
      "version": "1.0.1",
      "resolved": "http://registry.npm.baidu-int.com/@ant-design%2ficons-vue/-/icons-vue-1.0.1.tgz",
      "integrity": "sha1-NDV5IZwEGQgxyco4Jq7HNhu4tNQ=",
      "requires": {
        "ant-design-palettes": "^1.1.3",
        "babel-runtime": "^6.26.0"
      }
    },
    "@babel/code-frame": {
      "version": "7.0.0",
      "resolved": "http://registry.npm.baidu-int.com/@babel%2fcode-frame/-/code-frame-7.0.0.tgz",
      "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
      "dev": true,
      "requires": {
        "@babel/highlight": "^7.0.0"
      }
    },
    "@babel/core": {
      "version": "7.7.5",
      "resolved": "http://registry.npm.baidu-int.com/@babel%2fcore/-/core-7.7.5.tgz",
      "integrity": "sha1-rhMjzQNbUWApMwf1BkfoP4umL34=",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.5.5",
        "@babel/generator": "^7.7.4",
        "@babel/helpers": "^7.7.4",
        "@babel/parser": "^7.7.5",
        "@babel/template": "^7.7.4",
        "@babel/traverse": "^7.7.4",
        "@babel/types": "^7.7.4",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
        "json5": "^2.1.0",
        "lodash": "^4.17.13",
        "resolve": "^1.3.2",
        "semver": "^5.4.1",
        "source-map": "^0.5.0"
      },
      "dependencies": {
        "@babel/code-frame": {
          "version": "7.5.5",
          "resolved": "http://registry.npm.baidu-int.com/@babel%2fcode-frame/-/code-frame-7.5.5.tgz",
          "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
          "dev": true,
          "requires": {
            "@babel/highlight": "^7.0.0"
          }
        }
    }
  }
}

package.json文件记录你项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新（最新版本的nodejs不会更新，因为有package-lock.json文件，下面再说）。另外，package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记录。

package-lock.json文件锁定所有模块的版本号，包括主模块和所有依赖子模块。当你执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。因此，正因为有了package-lock.json文件锁定版本号，所以当你执行npm install的时候，node不会自动更新package.json文件中的模块，必须用npm install packagename（自动更新小版本号）或者npm install packagename@x.x.x（指定版本号）来进行安装才会更新，package-lock.json文件中的版本号也会随着更新。

附：当package.json与package-lock.json都不存在，执行"npm install"时，node会重新生成package-lock.json文件，然后把node_modules中的模块信息全部记入package-lock.json文件，但不会生成package.json文件，此时，你可以通过"npm init --yes"来初始化生成package.json文件。

总结：

项目中引入的包版本号之前经常会加^号，每次在执行npm install之后，下载的包都会发生变化，为了系统的稳定性考虑，每次执行完npm install之后会创建或者更新package-lock文件。该文件记录了上一次安装的具体的版本号，相当于是提供了一个参考，在出现版本兼容性问题的时候，就可以参考这个文件来修改版本号即可。