前言

一、package.json是什么

   管理本地安装的npm包，一个package.json文件可以做下面这些事情：

• 展示项目所依赖的npm包
• 允许你指定一个包的版本【范围】
• 让你建立版本稳定，意味着你可以更好地与其他开发者共享

二、执行cnpm命令下载node_modules

   1.查看当前package.json文件的配置
   这是在DOS命令窗口,建立框架后生成的package.json文件

 "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"

  2.使用cnpm install（淘宝镜像地址），下载node_modules后，发现其中Angular CLI：1.7.4（脚手架–Command Line Interface的简写，是一种命令行接口，实现自动化开发流程）Angular：5.2.11，这与package.json中的版本号"@angular/cli": "~1.7.3", "@angular/core": "^5.2.0",有点关系。

  3.两种标号 ^ ~的解释
(1)波浪号~ 向新兼容下载最新库包
~1.2 := >=1.2.0 <1.(2+1).0 := >=1.2.0 <1.3.0 (Same as 1.2.x)
~1 := >=1.0.0 <(1+1).0.0 := >=1.0.0 <2.0.0 (Same as 1.x)
~0.2.3 := >=0.2.3 <0.(2+1).0 := >=0.2.3 <0.3.0
~0.2 := >=0.2.0 <0.(2+1).0 := >=0.2.0 <0.3.0 (Same as 0.2.x)
~0 := >=0.0.0 <(0+1).0.0 := >=0.0.0 <1.0.0 (Same as 0.x)
~1.2.3-beta.2 := >=1.2.3-beta.2 <1.3.0
(2)上标号^ 向新兼容依赖
^1.2.3 := >=1.2.3 <2.0.0
^0.2.3 := >=0.2.3 <0.3.0
^0.0.3 := >=0.0.3 <0.0.4
^1.2.3-beta.2 := >=1.2.3-beta.2 <2.0.0
^1.2.x := >=1.2.0 <2.0.0
^0.0.x := >=0.0.0 <0.1.0
^0.0 := >=0.0.0 <0.1.0
^1.x := >=1.0.0 <2.0.0
^0.x := >=0.0.0 <1.0.0
这个规律从官网上借鉴的，并没有发现这两种标号的明确的区别界限，具体官网地址：https://www.npmjs.com.cn/misc/semver/

二、package-lock.json文件的产生

   1.上面我们提到了package.json文件下载到的依赖包可能在不同的情况下，各库包的版本语义可能并不相同，有的库包开发者并不严格遵守这一原则：相同大版本号的同一个库包，其接口符合兼容要求。
   2.产生问题：在不同时间或者不同npm下载源之下，下载的各依赖包版本可能有所不同，因此其依赖库包行为特征也不同，有时候甚至完全不兼容。
   3.npm5开始提供自动生成package-lock.json文件的功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json文件所标识的具体版本下载依赖库包，就能确保所有库包与上次的安装完全一样；
4.npm的下载源改为私服地址，这样产生的package-lock.json文件的版本号是这个私服上设置好的版本号。

三、两个文件之间的关系

   package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。
  使用npm 命令执行后产生的package-lock.json文件：其中显示当前@angular/cli锁定的版本

  "@angular/cli": {
      "version": "1.7.4",
      "resolved": "http://192.168.22.50:4873/@angular%2fcli/-/cli-1.7.4.tgz",
      "integrity": "sha512-URdb1QtnQf+Ievy93wjq7gE81s25BkWUwJFPey+YkphBA3G1lbCAQPiEh2pntBwaIKavgEuCw+Sf2YZdgTVhDA==",
      "dev": true,
      "requires": {
        "@angular-devkit/build-optimizer": "0.3.2",
        "@angular-devkit/core": "0.3.2",
      }

小结