前端踩坑系列《六》——讓人又愛又恨的npm包

Gping發表於2019-04-27
前端NPM

前言

作為一個前端，我們經常在執行一個命令的時候報錯，那就是 npm install，那麼 npm install 的時候，程式到底做了什麼，還有遇到一些類似的問題的時候怎麼去定位問題？

以下是我對 npm 包的一些理解，還有自己踩的一些坑，不得不說，npm 的坑實際上跟下面這張圖體現出來的一樣，深不見底，只能列舉一二。

前端踩坑系列《六》——讓人又愛又恨的npm包

關於 npm install

首先 npm 是 Node 的模組管理器，npm 完成了 Node 第三方模組的釋出、安裝等等.

npm install 會將 npm 包安裝到 node_modules 目錄下

此處參考阮一峰的部落格，具體執行過程是這樣的：

1.發出 npm install 指令 2.npm 向 registry 查詢壓縮包的地址 3.下載壓縮包後，存放到 ~/.npm 目錄 4.解壓壓縮包到當前專案中的 node_module 目錄

其中具體要安裝哪些包，可以在 install 後面指定，預設的話，就會去 package.json 檔案中查詢。這裡我們需要注意的是 dependencies 和 devDependencies 的區別

dependencies（專案依賴庫）也就是最後打包的時候也需要打包進去專案中，我們在安裝的時候可以使用--save 寫入到 dependencies.這裡的外掛是需要釋出到生產環境，自始至終都會存在

devDependencies（開發依賴庫）我們安裝的時候可以加上 --save-dev.這裡的外掛只用於開發環境，而不用於生產環境。打包的時候需要，打包完成就不再需要。

npm 換源

由於 npm 包如果直接安裝的話，是從國外的伺服器下載的，速度會比較慢，而且容易出現異常，那麼我們可以換成國內的源，比如淘寶的 cnpm，下面的一些命令可能幫得上你

npm install --registry=https://registry.npm.taobao.org // 臨時使用淘寶映象install
npm --registry https://registry.npm.taobao.org install express // 使用臨時淘寶映象install某個模組
npm install -g cnpm --registry=https://registry.npm.taobao.org  // 全域性安裝淘寶映象，之後可以直接使用cnpm install

npm config set registry https://registry.npm.taobao.org // 永久設定npm為淘寶映象
npm config set registry https://registry.npmjs.org/ // 使用官方的映象
npm config get registry // 檢視npm源地址
複製程式碼

這裡推薦一個換源的工具， nrm，自行百度，不再細說.

npm 包版本問題

在 package.json 檔案中，我們會看到每個依賴都有指定的版本

前端踩坑系列《六》——讓人又愛又恨的npm包

首先我們來認識一下，這些版本的命名規則，我們都會命名成 x.y.z 格式，其中

  • x 是主版本。大改動。
  • y 是次版本號。增加新特性
  • z 是補丁號。修復問題

然後注意一點就是上面截圖中的 ^ 符號，它代表的是在依賴版本相容下，最新的次版本。有時候我們遇到一些問題，需要改成 ~，代表的是在依賴版本相容下，最新的補丁版。

前端踩坑系列《六》——讓人又愛又恨的npm包

關於 package.lock.json

前端踩坑系列《六》——讓人又愛又恨的npm包

問題描述 這個是團隊同事遇到的一個問題，在這裡也記錄一下。 npm i 的時候會報下面的問題：

前端踩坑系列《六》——讓人又愛又恨的npm包

刪除 package-lock.json 就不會有這個問題。

問題解決 首先，我們需要清楚 package-lock.json 的作用，很簡單就是要鎖定安裝依賴的時候的版本號，在團隊協作的時候有必要的話上傳到 git 上，防止因為依賴版本問題導致出現 bug。

重新看回報錯資訊，就會發現，它的提示意思就是原本期待是什麼版本，但是現在你是什麼版本

比特幣事件

前端踩坑系列《六》——讓人又愛又恨的npm包

問題描述： 專案在重新裝依賴的時候，發現報以上的問題。

問題分析： 一開始認為是這個包不存在，但是奇怪的是在 package.json 中沒有找到這個依賴。但是自己忽略了一種情況，就是有可能是依賴的依賴。

那為什麼安裝不成功呢？ 跟之前的“比特幣事件”相關，這都能掉進坑裡

起因：比特幣事件

解決方法： 目前 npm 已經刪除了帶有惡意版本的 event-stream，如果你想繼續使用 event-stream，可更新到最新版本的 event-stream 4.0.1。

那我們可以先安裝這個版本的 event-stream

npm i event-stream@4.0.1

然後重新 npm i，就可以解決了

結束語

npm 包會遇到各種各樣神奇的問題，最後兩個坑就是明顯的例子，我覺得我們能做的，就是搞清楚它的原理，在遇到類似問題的時候能夠進一步的定位問題。

小廣告專用區

本公眾號會在後臺收集大家平時遇到的問題以及解決方法，歡迎大家投稿！當然問題以及解決方法都是有一定的格式的，具體的要求如下：

  • 使用 markdown 書寫（必須），特別是英文，還有程式碼塊
  • 每個問題都應該包括“問題描述”和“問題解決”兩個部分（必須）
  • 其他的格式參考 掘金翻譯計劃（非必須）

歡迎大家關注本公眾號

image

相關文章