一、腳本的地位

腳本是 項目真正的入口 。

無論你是剛剛 clone 完公司的項目，抑或是你準(zhǔn)備在開源社區(qū)做一點微小的貢獻(xiàn)；你需要做的第一件事，永遠(yuǎn)是：

打開 package.json，看看 scripts 里都有哪些腳本。

• 有些腳本負(fù)責(zé)“構(gòu)建”，如：build、bundle、build:doc；
• 有些腳本負(fù)責(zé)“調(diào)試”，如：dev、serve、start;
• 有些腳本負(fù)責(zé)“單測”，如 test；
• 等等……

當(dāng)你執(zhí)行 npm run serve 或者 npm run dev 時，你可以開始開發(fā)調(diào)試，推進(jìn)項目的進(jìn)度。

但使用腳本的過程中，也有不便之處。

是什么？往下看。

二、“腳本調(diào)度”的難題

王咸魚是一家小公司的前端骨干，經(jīng)常負(fù)責(zé)前端項目重構(gòu)、架構(gòu)調(diào)整、打包優(yōu)化等方面的工作。

但他經(jīng)常遇到這樣的問題：

如果我要先運行 build:umd、再運行 build:esm、再運行 build:docs，應(yīng)該怎么做？

就像這樣：

想了想，他覺得自己可以了，于是寫了如下代碼：

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

不過項目組的小伙伴很快就提出了質(zhì)疑：

"build:umd 和 build:esm 沒有前置依賴關(guān)系啊，應(yīng)該可以同時構(gòu)建，這樣能提升構(gòu)建效率。"

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

構(gòu)建過程就變成了這樣：

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

那么，有更好的辦法嗎？

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

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

新世界的大門從此打開。

三、如此簡單？

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

他只寫了一行代碼：

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

以上腳本執(zhí)行后會有什么效果呢？

• build:umd 和 build:esm 首先會異步同時執(zhí)行；
• 以上二者都結(jié)束后，會同步執(zhí)行 build:docs

“完美！”

王咸魚伸了個懶腰，終于可以下班了。

但是第二天，又有組員提出了疑問：“這仨完全可以同時運行?。?rdquo;

王咸魚聽了，覺得很有道理，用了三秒鐘就實現(xiàn)了效果，僅僅刪了幾個代碼：

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

sooooooo！easy!

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

npm-run-all 是什么？

官方如此自我介紹：

一個 CLI 工具，可以并行、或者按順序執(zhí)行多個 npm 腳本。

對，它可以輕松地組織 “npm 腳本” 的執(zhí)行順序。

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 這個命令，你可以隨意組織腳本。它有很多選項，其中最關(guān)鍵的是這兩個：

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

沒錯，就是 -s 和 -p；

• s，便是 serial，指 “串行”。
• p，便是 parallel，指 “并行”。

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

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

• 首先，串行執(zhí)行 a 和 b
• 然后，并行執(zhí)行 c 和 d
• 再次，串行執(zhí)行 e 和 f
• 最后，并行執(zhí)行 g、h、i

4.3 第二個命令：npm-s

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

npm-s a b c

先效果是：串行執(zhí)行 a，b，c；

4.4 第三個命令：npm-p

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

npm-p a b c

先效果是：并行執(zhí)行 a，b，c；

4.5 通配符

先假設(shè)，如果同時存在 build:umd、build:esm、build:docs，你想讓它們?nèi)齻€并行執(zhí)行。

你可能會寫這樣的代碼：

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

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

有，用通配符：

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

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

4.6 更多實用能力

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

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

....

這也是它相比于直接寫 shell 最大的優(yōu)勢所在；

以上就是npm腳本庫組織在項目中的地位詳解的詳細(xì)內(nèi)容，更多關(guān)于npm腳本庫組織的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論