package.json和npm install、cnpm install 的問題

問題：最近使用cnpm安装项目依赖后，运行项目出现样式错乱问题。

描述：最近项目开发，需求参插了很多个版本，所以在前端项目的主干上拉好几套分支代码。拉的分支并不会把node_modules也拉过去，所以只能重新安装cnpm install。运行项目发现一个很严重的bug，一些样式没有生效，导致一些功能没办法正常使用。然后就开始找问题，发现主干上（还是原来的node_modules）的代码运行是没有问题，那么应该是cnpm install的安装的node_modules依赖出现问题了，然后我又用npm install安装了一遍，运行后样式还是错乱的。

我将分支上的node_modules和主干上的node_modules进行对比，发现版本不一样！！！

但是，我又对比了主干和分支的package.json ，发现里面的版本信息都是一样的 "vue-loader": "^13.0.4", 按道理node_modules也一样才对呀？？？为什么呢？

解决过程：那么我们现在来研究两个问题

1、package.json 版本信息

2、cnpm install和npm install 的安装区别

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

一、package.json 版本信息

1、版本的格式

major.minor.patch

主版本号.次版本号.修补版本号

————————————————————

patch：修复bug，兼容老版本

minor：新增功能，兼容老版本

major：新的架构调整，不兼容老版本

补丁中的更改表示不会破坏任何内容的错误修复。 次要版本的更改表示不会破坏任何内容的新功能。 主要版本的更改代表了一个破坏兼容性的大变化

2、版本指定

• version

  必须匹配某个版本

  如：1.1.2，表示必须依赖1.1.2版

• ^version

  兼容某个版本

  版本号中最左边的非0数字的右侧可以任意

  如果缺少某个版本号，则这个版本号的位置可以任意

  如：^1.1.2 ，表示>=1.1.2 <2.0.0，可以是1.1.2，1.1.3，.....，1.1.n，1.2.n，.....，1.n.n

  如：^0.2.3 ，表示>=0.2.3 <0.3.0，可以是0.2.3，0.2.4，.....，0.2.n

  如：^0.0，表示 >=0.0.0 <0.1.0，可以是0.0.0，0.0.1，.....，0.0.n

• ~version

  大概匹配某个版本

  如果minor版本号指定了，那么minor版本号不变，而patch版本号任意

  如果minor和patch版本号未指定，那么minor和patch版本号任意

  如：~1.1.2，表示>=1.1.2 <1.2.0，可以是1.1.2，1.1.3，1.1.4，.....，1.1.n

  如：~1.1，表示>=1.1.0 <1.2.0，可以是同上

  如：~1，表示>=1.0.0 <2.0.0，可以是1.0.0，1.0.1，1.0.2，.....，1.0.n，1.1.n，1.2.n，.....，1.n.n

• >version

  必须大于某个版本

  如：>1.1.2，表示必须大于1.1.2版

  >=version

  可大于或等于某个版本

  如：>=1.1.2，表示可以等于1.1.2，也可以大于1.1.2版本

  <version

  必须小于某个版本

  如：<1.1.2，表示必须小于1.1.2版本

  <=version

  可以小于或等于某个版本

  如：<=1.1.2，表示可以等于1.1.2，也可以小于1.1.2版本

• x-range

  x的位置表示任意版本

  如：1.2.x，表示可以1.2.0，1.2.1，.....，1.2.n

• *-range

  任意版本，""也表示任意版本

  如：*，表示>=0.0.0的任意版本

• version1 - version2

  大于等于version1，小于等于version2

  如：1.1.2 - 1.3.1，表示包括1.1.2和1.3.1以及他们件的任意版本

• range1 || range2

  满足range1或者满足range2，可以多个范围

  如：<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0，表示满足这3个范围的版本都可以

• latest 当前发布版本。
  这是一个标记（tag，详见 dist-tag |npm Documentation），默认情况下 npm install 安装的就是这个 latest 标记。 常见的标记还有 next stable beta canary 。

感谢 @钱天兵 https://www.cnblogs.com/wshiqtb/p/6395029.html

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

因为 package.json中的"vue-loader": "^13.0.4"，所以安装的是 >=13.0.4 <14.0.0，所以安装了13.7.2这个版本。

那么我只能用最笨的办法，就是对照package.json 里面的依赖，对照主干上的node_modules上的版本，去更新package.json 例如"vue-loader": "^13.0.4"  ===》"vue-loader": "13.0.4"  指定安装某个版本。然后 npm install ，再次运行，发现样式错乱的问题解决了。

发现生成了一个package-lock.json 文件。下一篇文章，再研究一下package-lock.json 和package.json 的区别。现在研究一下cnpm和npm 的区别先。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

二、cnpm install和npm install 的安装区别

• cnpm：优点是速度快，缺点是没办法保证每个同事安装依赖的时候版本一致，就会出现依赖升级不兼容性问题
• npm：优点是通过package-lock.json文件能够锁定版本，缺点是安装速度慢。

cnpm install 安装的包会在 node_modules 里创建两个文件夹，其中一个是另一个的引用，这样就会导致项目依赖比较多的时候 node_moduels 里有很多引用目录。

而 npm install 则不是这样