npm指令碼庫組織在專案中的地位詳解

一、指令碼的地位

指令碼是 專案真正的入口 。

無論你是剛剛 clone 完公司的專案，抑或是你準備在開源社群做一點微小的貢獻；你需要做的第一件事，永遠是：

開啟 package.json，看看 scripts 裡都有哪些指令碼。

• 有些指令碼負責“構建”，如：build、bundle、build:doc；
• 有些指令碼負責“偵錯”，如：dev、serve、start;
• 有些指令碼負責“單測”，如 test；
• 等等……

當你執行 npm run serve 或者 npm run dev 時，你可以開始開發偵錯，推進專案的進度。

但使用指令碼的過程中，也有不便之處。

是什麼？往下看。

二、“指令碼排程”的難題

王鹹魚是一家小公司的前端骨幹，經常負責前端專案重構、架構調整、打包優化等方面的工作。

但他經常遇到這樣的問題：

如果我要先執行 build:umd、再執行 build:esm、再執行 build:docs，應該怎麼做？

就像這樣：

想了想，他覺得自己可以了，於是寫了如下程式碼：

npm run build:umd && npm run build:esm && npm run build:docs 

不過專案組的小夥伴很快就提出了質疑：

"build:umd 和 build:esm 沒有前置依賴關係啊，應該可以同時構建，這樣能提升構建效率。"

王鹹魚一聽，覺得很有道理。

構建過程就變成了這樣：

這下讓王鹹魚為難了，居然沒想到快捷的辦法，只能引入了 gulp ，並寫了一些額外的 js 指令碼才解決這個問題。

那麼，有更好的辦法嗎？

這天晚上，王鹹魚加班到深夜，一位正在巡邏的髮際線奇高的保安大哥，偶然掃了一眼他的螢幕，用低沉的聲音告訴他：

"傻小子，用 npm-run-all 啊！"

新世界的大門從此開啟。

三、如此簡單？

上面那個讓王鹹魚抓耳撓腮的問題，瞬間被解決了！

他只寫了一行程式碼：

{
  "scripts": {
    "build": "npm-run-all -p build:esm build:umd -s build:docs"
  }
}

以上指令碼執行後會有什麼效果呢？

• build:umd 和 build:esm 首先會非同步同時執行；
• 以上二者都結束後，會同步執行 build:docs

“完美！”

王鹹魚伸了個懶腰，終於可以下班了。

但是第二天，又有組員提出了疑問：“這仨完全可以同時執行啊！”

王鹹魚聽了，覺得很有道理，用了三秒鐘就實現了效果，僅僅刪了幾個程式碼：

{
  "scripts": {
    "build": "npm-run-all -p build:esm build:umd build:docs"
  }
}

sooooooo！easy!

四、此劍名曰： npm-run-all

npm-run-all 是什麼？

官方如此自我介紹：

一個 CLI 工具，可以並行、或者按順序執行多個 npm 指令碼。

對，它可以輕鬆地組織 “npm 指令碼” 的執行順序。

npmjs: www.npmjs.com/package/npm…

github: github.com/mysticatea/…

4.1 安裝

yarn add -D npm-run-all
# or
npm install -D npm-run-all

4.2 第一個命令： npm-run-all

通過 npm-run-all 這個命令，你可以隨意組織指令碼。它有很多選項，其中最關鍵的是這兩個：

npm-run-all -s a b -p c d

沒錯，就是 -s 和 -p；

• s，便是 serial，指 “序列”。
• p，便是 parallel，指 “並行”。

通過不斷組合以上兩個選項，可以定義出多種執行順序，比如：

npm-run-all a b --parallel c d --serial e f --parallel g h i

• 首先，序列執行 a 和 b
• 然後，並行執行 c 和 d
• 再次，序列執行 e 和 f
• 最後，並行執行 g、h、i

4.3 第二個命令：npm-s

npm-s 可以理解為 npm-run-all --serial的簡寫。

npm-s a b c

先效果是：序列執行 a，b，c；

4.4 第三個命令：npm-p

npm-p 可以理解為 npm-run-all --parallel的簡寫。

npm-p a b c

先效果是：並行執行 a，b，c；

4.5 萬用字元

先假設，如果同時存在 build:umd、build:esm、build:docs，你想讓它們三個並行執行。

你可能會寫這樣的程式碼：

{
  "scripts": {
    "build": "npm-p build:umd build:esm build:docs"
  }
}

但是呢，就很長，很難看，有沒有更好的辦法？

有，用萬用字元：

{
  "scripts": {
    "build": "run-p "build:*""
  }
}

舒服！這樣就行了，完美！

4.6 更多實用能力

除了上面介紹的順序編排外，npm-run-all 還提供了很多實用選項：

• --max-parallel 最大並行數限制。比如你有20個構建物要打包，但 CPU 能力有限，你希望同一時間最多有三個在構建，就可以用它；
• --continue-on-error 顧名思義，出錯了繼續執行；
• --race 參考 Promise.race

....

這也是它相比於直接寫 shell 最大的優勢所在；

以上就是npm指令碼庫組織在專案中的地位詳解的詳細內容，更多關於npm指令碼庫組織的資料請關注it145.com其它相關文章！