JavaScript项目中锁定npm依赖包版本

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

描述：最近升级项目webpack的时候，删除了node_modules，从新安装了，cnpm install，运行项目发现有些地方样式和以前样式不同，样式变得错乱了，而后就开始找问题,找到运行正常的同事对比了package.json发现版本信息都同样，问题就很奇怪，按理package.json里面同样，node_modules也同样才对。

而后把同事的node_modules拷贝过来，结果运行正常，

为何node_modules会不同？

和同事对比了依赖的版本，发现仍是有差别的，左边是有错误的，右边是正确;

而后我安装成右边正确的版本，发现样式问题都好了。 为何会形成安装的版本不同？ 图下是本地项目 package.json依赖

网上找了下 包里面的^是什么意思,示例以下：

• 1.2.1
  -匹配指定版本，这里是匹配1.2.1。

• ^1.0.0
  匹配 >=1.0.0 且 <2.0.0的版本。
  ^ 前缀意为 与指定的版本兼容 。
  ^ 前缀表示最左边的非0段不容许改变，该段以后的段能够为更高版，因此
  ^1.1.0 匹配 >=1.1.0 且 <2.0.0
  ^0.0.3 匹配 >=0.0.3 且 <0.0.4

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

• ^5.x
  匹配 >=5.0.0 且 <6.0.0。 X, x 及 * 为通配符，版本号尾部省略的段等同于通配符，因此 匹配 >=0.0.0
  1 匹配 >=1.0.0 且 <2.0.0
  1.2 匹配 >=1.2.0 且 <1.3.0

• ~0.1.1
  匹配 >=0.1.1 且 <0.2.0。

• ~
  前缀意为 约等于版本 若是存在次版本号，则容许修订号为更高版，不然容许次版本号为更高版。

• ~1
  匹配 >=1.0.0 且 <2.0.0
  匹配 >=0.0.0
  

• =3.0.0
  同字面意义 >=3.0.0。
  

• < <= > >= =
  多个表达式之间用 空格 分隔表示并集，用 || 分隔交集。
  

• 1.30.2 - 2.30.2
  匹配 >=1.30.2 且 <=2.30.2

缘由已经找到了，怎么来解决这个问题？

咱们安装依赖经常使用的方式有3种cnpm、npm、yarn:

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

基于团队考虑，仍是使用的yarn来控制项目依赖的版本,yarn使用起来和npm 大同小异，学习起来仍是比较快的。问题解决了，开心。下面解释下yarn经常使用方法，

yarn 使用方法

安装yarn

brew install yarn

安装项目的所有依赖

yarn || yarn install

添加依赖包 分别添加到 devDependencies、peerDependencies 和 optionalDependencies 类别中：

yarn 类型npm install
yarn add [name] --dev
yarn add [name] --peer
yarn add [name] --optional

更新依赖

yarn upgrade [package] --dev
yarn upgrade [package]@[version] --dev
yarn upgrade [package]@[tag] --dev

删除依赖

yarn remove [package]

总结

一直都是使用cnpm来安装依赖，安装速度快，也比较方便，可是多人协做开发是容易出现问题，多人协做开发依赖版本应该保持一致。避免依赖版本不兼容项目出现问题。