npm script 多命令的運行

本文已同步在個人博客: ruizhengyun.cn/blog/post/c…

一個項目不免會有多個 npm script, 如何將多個命令串行（就是多個腳本通同步執行），如何並行（提升速度，互不阻塞）。

爲什麼有多個命令

通常來講，前端項目包括 js、less、css、scss、json、markdown 等格式的文件，爲了保障代碼的質量（規避語法錯誤和保持一致的編碼風格），就須要添加檢查。在團隊中更加提現其價值。

經常使用檢查

• eslint, 可定製的 js 代碼檢查
• stylelint, 可定製的樣式文件檢查，支持 css、less、scss；
• jsonlint, json 文件語法檢查，踩過坑的同窗會清楚，json 文件語法錯誤會知道致使各類失敗；
• markdownlint-cli, Markdown 文件最佳實踐檢查，我的偏好；

有人問，html 代碼怎麼不列出來呢？其實我也想，只是工具支持薄弱，就...

"scripts": {
    "lint:js": "eslint ./src/**/*.js",
    "lint:jsx": "eslint ./src/**/*.jsx",
    "lint:css": "stylelint ./src/**/*.less",
    "lint:json": "jsonlint --quiet ./src/**/*.json",
    "lint:markdown": "markdownlint --config .markdownlint.json ./src/**/*.md"
},
"devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "jsonlint": "^1.6.3",
    "markdownlint-cli": "^0.16.0",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.3.0"
},
"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
}
複製代碼

串行

實現方式很簡單，用 && 符號按順序把命令串聯起來。

"scripts": {
    ...,
    "lint:cx": "npm run lint:js && npm run lint:jsx && npm run lint:css && npm run lint:json && npm run lint:markdown"
}
複製代碼

注： 串行命令執行過程當中，若是前面的命令失敗，後面命令會所有終止。示例很簡單，本身試下就好。

並行

其實也很簡單，用一個 & 鏈接多個命令。

"scripts": {
    ...,
    "lint:bx": "npm run lint:js & npm run lint:jsx & npm run lint:css & npm run lint:json & npm run lint:markdown"
}
複製代碼

注： 並行命令，爲了穩定復現一些錯誤，可在命令最後加上 & wait。另外，加上 & wait 的好處還有，若是咱們在子命令啓動長時間運行的進程，可用 ctrl + c 來結束進程。

更好的管理

並行或串行的命令中，每添加一條就要加上 npm run xxx，重複部分顯得囉嗦臃腫，能夠用 npm i npm-run-all 來實現一樣的功能。

"scripts": {
    ...,
    "lint:cx-all": "npm-run-all lint:js lint:jsx lint:css lint:json lint:markdown"
}
複製代碼

npm-run-all 還支持通配符，進一步優化

"scripts": {
    ...,
    "lint-cx-all": "npm-run-all lint:*"
}
複製代碼

上面只是用 npm-run-all 實現了串行，那並行是怎樣的呢？

"scripts": {
    ...,
    "lint:bx-all": "npm-run-all --parallel lint:*"
}
複製代碼

注 此次咱們沒有在並行的後面加上 & wait，或許你猜到了，npm-run-all 幫咱們作了（作好事不留名）

補充 parallel，[ˈpærəlel]，平行的;極類似的;同時發生的;相應的;對應的;並行的 更多關於 npm-run-all 可看文檔

你能夠...

上一篇：npm script 一見傾心

下一篇：npm script 參數的使用

目錄：npm script 小書