前言:最近使用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來安裝依賴,安裝速度快,也比較方便,但是多人協作開發是容易出現問題,多人協作開發依賴版本應該保持一致。避免依賴版本不兼容項目出現問題。