前言：最近使用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 installyarn add [name] --devyarn add [name] --peeryarn add [name] --optional
更新依赖
yarn upgrade [package] --dev yarn upgrade [package]@[version] --devyarn upgrade [package]@[tag] --dev
删除依赖
yarn remove [package]
总结
一直都是使用cnpm来安装依赖，安装速度快，也比较方便，但是多人协作开发是容易出现问题，多人协作开发依赖版本应该保持一致。避免依赖版本不兼容项目出现问题。