當 npm script 不斷累積、膨脹的時候，全部放在 package.json 里面可能并不是個好主意，因為這樣會導致 package.json 糟亂，可讀性降低。 借助 [scripty](https://github.com/testdouble/scripty) 我們可以將 npm script 剝離到單獨的文件中，從而把復雜性隔到單獨的模塊里面，讓代碼整體看起來更加清晰。 示例項目中的覆蓋率相關的 npm script 占據了很大的篇幅，如下： ``` "scripts": { "cover": "nyc --reporter=html npm test", "cover:cleanup": "rimraf coverage && rimraf .nyc_output", "cover:archive": "cross-var \"make-dir coverage_archive/$npm_package_version && cpr coverage/* coverage_archive/$npm_package_version -o\"", "cover:serve": "cross-var http-server coverage_archive/$npm_package_version -p $npm_package_config_port", "cover:open": "cross-var opn http://localhost:$npm_package_config_port", "precover": "npm run cover:cleanup", "postcover": "npm-run-all cover:archive --parallel cover:serve cover:open" }, ``` 如果要隔離復雜性，我們可以考慮從 cover 相關的 script 入手，具體操作步驟如下： ### 1\. 安裝依賴 ``` npm i scripty -D # npm install scripty --save-dev # yarn add scripty -D ``` ### 2\. 準備目錄和文件 ``` mkdir -p scripts/cover ``` 先創建兩層的目錄，因為我們計劃把 cover 腳本寫成多個，方便單獨去執行，這里命名為 scripts 是 scripty 默認的，實際上是可以自定義的。 ``` touch scripts/cover.sh touch scripts/cover/serve.sh touch scripts/cover/open.sh ``` 然后創建空白的腳本文件，因為有了單獨的腳本，我們可以把原來的 precover、cover、postcover、cover:archive、cover:cleanup 合并到一個文件中。 按照 scripty 的默認約定，npm script 命令和上面各文件的對應關系如下： 命令 文件 備注 cover scripts/cover.sh 內含 precover、postcover 的邏輯 cover:serve scripts/cover/serve.sh 啟動服務 cover:open scripts/cover/open.sh 打開預覽 **特別注意的是，給所有腳本增加可執行權限是必須的，否則 scripty 執行時會報錯**，我們可以給所有的腳本增加可執行權限： ``` chmod -R a+x scripts/**/*.sh ``` ### 3\. 修改 scripty 腳本 準備好目錄和文件之后，接下來需要給腳本填充內容，腳本內容如下（因為腳本使用的是 bash，所以直接忽略了跨平臺兼容的處理，跨平臺兼容腳本最好使用 Node.js 編寫，下節會介紹）： `scripts/cover.sh` 內容如下（cleanup --> cover --> archive --> preview）： ``` #!/usr/bin/env bash # remove old coverage reports rimraf coverage && rimraf .nyc_output # run test and collect new coverage nyc --reporter=html npm run test # achive coverage report by version mkdir -p coverage_archive/$npm_package_version cp -r coverage/* coverage_archive/$npm_package_version # open coverage report for preview npm-run-all --parallel cover:serve cover:open ``` `scripts/cover/serve.sh` 內容如下： ``` #!/usr/bin/env bash http-server coverage_archive/$npm_package_version -p $npm_package_config_port ``` `scripts/cover/open.sh` 內容如下（這里有個 sleep，是為了確保文件系統寫入完成）： ``` #!/usr/bin/env bash sleep 1 opn http://localhost:$npm_package_config_port ``` 細心的同學可能注意到了，在 shell 腳本里面是可以隨意使用 npm 的內置變量和自定義變量的。 ### 4\. 修改 package.json 主要改動是清理 cover:\* 命令，接入 scripty，具體的 diff 如下： ``` "scripts": { "test": "cross-env NODE_ENV=test mocha tests/", - "cover": "nyc --reporter=html npm test", - "cover:cleanup": "rimraf coverage && rimraf .nyc_output", - "cover:archive": "cross-var \"make-dir coverage_archive/$npm_package_version && cpr coverage/* coverage_archive/$npm_package_version -o\"", - "cover:serve": "cross-var http-server coverage_archive/$npm_package_version -p $npm_package_config_port", - "cover:open": "cross-var opn http://localhost:$npm_package_config_port", - "precover": "npm run cover:cleanup", - "postcover": "npm-run-all cover:archive --parallel cover:serve cover:open" + "cover": "scripty", + "cover:serve": "scripty", + "cover:open": "scripty" }, ``` 這里我們只保留了 cover、cover:serve、cover:open 等 3 個命令，讓它們都指向 scripty，調用哪個腳本都由 scripty 來處理。 ### 5\. 實際測試 修改完畢之后，重新運行 npm run cover，不出意外的話，我們能得到和原來完全相同的結果，仔細觀察運行的日志，會發現在代碼執行前有段額外的輸出，如下圖中紅色框中的內容，scripty 在實際執行的時候會把執行的命令內容打印出來，方便調試：  ### 高級技巧 scripty 比上面演示的要更強大，也支持通配符運行、腳本并行等特性、靜默模式，如果有需求可以閱讀官方的 [README.md](https://github.com/testdouble/scripty#advanced-usage)，畢竟咱們已經入門了，不是么？ * * * > 本節用到的代碼見 [GitHub](https://github.com/wangshijun/automated-workflow-with-npm-script/tree/07-manage-complexity-using-scripty)，想邊看邊動手練習的同學可以拉下來自己改，注意切換到正確的分支 `07-manage-complexity-using-scripty`。 * * *