package.json和npm install、cnpm install 的問題

問題：最近使用cnpm安裝項目依賴後，運行項目出現樣式錯亂問題。

描述：最近項目開發，需求參插了不少個版本，因此在前端項目的主幹上拉好幾套分支代碼。拉的分支並不會把node_modules也拉過去，因此只能從新安裝cnpm install。運行項目發現一個很嚴重的bug，一些樣式沒有生效，致使一些功能沒辦法正常使用。而後就開始找問題，發現主幹上（仍是原來的node_modules）的代碼運行是沒有問題，那麼應該是cnpm install的安裝的node_modules依賴出現問題了，而後我又用npm install安裝了一遍，運行後樣式仍是錯亂的。

我將分支上的node_modules和主幹上的node_modules進行對比，發現版本不同！！！

 

可是，我又對比了主幹和分支的package.json ，發現裏面的版本信息都是同樣的 "vue-loader": "^13.0.4", 按道理node_modules也同樣纔對呀？？？爲何呢？

 

解決過程：那麼咱們如今來研究兩個問題

一、package.json 版本信息

二、cnpm install和npm install 的安裝區別

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 

1、package.json 版本信息

一、版本的格式

major.minor.patch

主版本號.次版本號.修補版本號

————————————————————

patch：修復bug，兼容老版本

minor：新增功能，兼容老版本

major：新的架構調整，不兼容老版本

補丁中的更改表示不會破壞任何內容的錯誤修復。 次要版本的更改表示不會破壞任何內容的新功能。 主要版本的更改表明了一個破壞兼容性的大變化

二、版本指定

• version

  必須匹配某個版本

  如：1.1.2，表示必須依賴1.1.2版

• ^version

  兼容某個版本

  版本號中最左邊的非0數字的右側能夠任意

  若是缺乏某個版本號，則這個版本號的位置能夠任意

  如：^1.1.2 ，表示>=1.1.2 <2.0.0，能夠是1.1.2，1.1.3，.....，1.1.n，1.2.n，.....，1.n.n

  如：^0.2.3 ，表示>=0.2.3 <0.3.0，能夠是0.2.3，0.2.4，.....，0.2.n

  如：^0.0，表示 >=0.0.0 <0.1.0，能夠是0.0.0，0.0.1，.....，0.0.n

• ~version

  大概匹配某個版本

  若是minor版本號指定了，那麼minor版本號不變，而patch版本號任意

  若是minor和patch版本號未指定，那麼minor和patch版本號任意

  如：~1.1.2，表示>=1.1.2 <1.2.0，能夠是1.1.2，1.1.3，1.1.4，.....，1.1.n 

  如：~1.1，表示>=1.1.0 <1.2.0，能夠是同上

  如：~1，表示>=1.0.0 <2.0.0，能夠是1.0.0，1.0.1，1.0.2，.....，1.0.n，1.1.n，1.2.n，.....，1.n.n

• >version

  必須大於某個版本

  如：>1.1.2，表示必須大於1.1.2版

  >=version

  可大於或等於某個版本

  如：>=1.1.2，表示能夠等於1.1.2，也能夠大於1.1.2版本

  <version

  必須小於某個版本 

  如：<1.1.2，表示必須小於1.1.2版本 

  <=version

  能夠小於或等於某個版本

  如：<=1.1.2，表示能夠等於1.1.2，也能夠小於1.1.2版本

• x-range

  x的位置表示任意版本

  如：1.2.x，表示能夠1.2.0，1.2.1，.....，1.2.n

• *-range

  任意版本，""也表示任意版本

  如：*，表示>=0.0.0的任意版本

• version1 - version2

  大於等於version1，小於等於version2

  如：1.1.2 - 1.3.1，表示包括1.1.2和1.3.1以及他們件的任意版本

• range1 || range2

  知足range1或者知足range2，能夠多個範圍

  如：<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0，表示知足這3個範圍的版本均可以

• latest 當前發佈版本。
  這是一個標記（tag，詳見 dist-tag |npm Documentation），默認狀況下 npm install 安裝的就是這個 latest 標記。 常見的標記還有 next stable beta canary 。

 

感謝 @錢天兵 http://www.javashuo.com/article/p-qdqyybhs-cb.html

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

由於 package.json中的"vue-loader": "^13.0.4"，因此安裝的是 >=13.0.4 <14.0.0，因此安裝了13.7.2這個版本。

那麼我只能用最笨的辦法，就是對照package.json 裏面的依賴，對照主幹上的node_modules上的版本，去更新package.json 例如"vue-loader": "^13.0.4"  ===》"vue-loader": "13.0.4"  指定安裝某個版本。而後 npm install ，再次運行，發現樣式錯亂的問題解決了。

發現生成了一個package-lock.json 文件。下一篇文章，再研究一下package-lock.json 和package.json 的區別。如今研究一下cnpm和npm 的區別先。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2、cnpm install和npm install 的安裝區別

• cnpm：優勢是速度快，缺點是沒辦法保證每一個同事安裝依賴的時候版本一致，就會出現依賴升級不兼容性問題
• npm：優勢是經過package-lock.json文件可以鎖定版本，缺點是安裝速度慢。

cnpm install 安裝的包會在 node_modules 裏建立兩個文件夾，其中一個是另外一個的引用，這樣就會致使項目依賴比較多的時候 node_moduels 裏有不少引用目錄。

而 npm install 則不是這樣