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來安裝依賴，安裝速度快，也比較方便，可是多人協做開發是容易出現問題，多人協做開發依賴版本應該保持一致。避免依賴版本不兼容項目出現問題。