一、腳本的地位

腳本是 項(xiàng)目真正的入口 。

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

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

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

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

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

是什么？往下看。

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

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

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

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

就像這樣：

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

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

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

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

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

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

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

那么，有更好的辦法嗎？

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

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

新世界的大門從此打開。

三、如此簡(jiǎn)單？

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

他只寫了一行代碼：

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

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

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

“完美！”

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

但是第二天，又有組員提出了疑問：“這仨完全可以同時(shí)運(yùn)行??！”

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

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

sooooooo！easy!

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

npm-run-all 是什么？

官方如此自我介紹：

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

對(duì)，它可以輕松地組織 “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 第一個(gè)命令： npm-run-all

通過 npm-run-all 這個(gè)命令，你可以隨意組織腳本。它有很多選項(xiàng)，其中最關(guān)鍵的是這兩個(gè)：

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

沒錯(cuò)，就是 -s 和 -p；

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

通過不斷組合以上兩個(gè)選項(xiàng)，可以定義出多種執(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 第二個(gè)命令：npm-s

npm-s 可以理解為 npm-run-all --serial的簡(jiǎn)寫。

npm-s a b c

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

4.4 第三個(gè)命令：npm-p

npm-p 可以理解為 npm-run-all --parallel的簡(jiǎn)寫。

npm-p a b c

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

4.5 通配符

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

你可能會(huì)寫這樣的代碼：

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

但是呢，就很長(zhǎng)，很難看，有沒有更好的辦法？

有，用通配符：

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

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

4.6 更多實(shí)用能力

除了上面介紹的順序編排外，npm-run-all 還提供了很多實(shí)用選項(xiàng)：

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

....

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

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

最新評(píng)論