前言：最近使用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来安装依赖，安装速度快，也比较方便，但是多人协作开发是容易出现问题，多人协作开发依赖版本应该保持一致。避免依赖版本不兼容项目出现问题。