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也同样才对呀？？？为何呢？

 

解决过程：那么咱们如今来研究两个问题

一、package.json 版本信息

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

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

1、package.json 版本信息

一、版本的格式

major.minor.patch

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

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

patch：修复bug，兼容老版本

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

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

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

二、版本指定

• 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 。

 

感谢 @钱天兵 http://www.javashuo.com/article/p-qdqyybhs-cb.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 的区别先。

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

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

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

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

而 npm install 则不是这样