前言：最近使用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]