【一庫】妙啊！這個庫組織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"      

以上腳本執行後會有什麼效果呢？

1. ​

   ​build:umd​

   ​​ 和​

   ​build:esm​

   ​ 首先會異步同時執行；
2. 以上二者都結束後，會同步執行​

   ​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      

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      

1. 首先，串行執行​

   ​a​

   ​​ 和​

   ​b​

   ​
2. 然後，并行執行​

   ​c​

   ​​ 和​

   ​d​

   ​
3. 再次，串行執行​

   ​e​

   ​​ 和​

   ​f​

   ​
4. 最後，并行執行​

   ​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​

  ​

....

五、結束語