JavaScript專案中鎖定npm依賴包版本

2021-09-13 04:05:30 字數 2634 閱讀 8657

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

基於團隊考慮,還是使用的yarn來控制專案依賴的版本,yarn使用起來和npm大同小異,學習起來還是比較快的。問題解決了,開心。下面解釋下yarn常用方法,

yarn 使用方法

安裝yarn

brew install yarn

安裝專案的全部依賴

yarn || yarn install

新增依賴包

分別新增到devdependenciespeerdependenciesoptionaldependencies類別中:

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來安裝依賴,安裝速度快,也比較方便,但是多人協作開發是容易出現問題,多人協作開發依賴版本應該保持一致。避免依賴版本不相容專案出現問題。

整理專案中用到的javascript全域性規則

最近在專案中考慮如何讓 重用,發現有2種途徑 注,目前專案中是用到自己寫的func,還沒使用mvc框架 一種時抽取出公用的方法,利用物件字面量放到命名空間中。如,要新增乙個打標籤功能,因為所有的專案頁面方法互動基本是相同的,只寫一次,任何分類下的檔案打標籤時都可以呼叫此命名空間下的方法。如 var ...

專案執行 專案中問題

多部門,多人員參與 1.確定專案總負責人,及時協調各方任務和人力 2.晨會溝通當天任務,同步專案進展 15min,晨會不做小組討論 3.同步專案進度和風險,已知風險確定解決方案或解決時間 下班前 前期調研不足,開發延期 專案已啟動,開發中期發現前期調研不足,不能按時交付測試 提測質量較差 bug堆積...

Visual Source Safe在專案中的使用

從這週開始正式著手對銳傲部落格進行修改,王老師把 放到了vss中,但是由於我的電腦和伺服器不在同一ip位址段中,導致每次使用的時候都需要手工進入。當在伺服器中架設好後,客戶端使用時在 開始 中選擇 執行 輸入伺服器的ip位址 此時可以看到乙個對話方塊,表明已連線到伺服器,要求輸入使用者名稱和密碼 這...