【npm第5期】藉助 scripty 將 npm script 剝離到單獨的檔案

weixin_34402408發表於2018-06-19
NPM

當 npm script 過多或者變得複雜時，會導致 package.json 混亂，可讀性差等問題。

這裡我們藉助 scripty 將 npm script 剝離到單獨的檔案中，從而把複雜性隔到單獨的模組裡面，讓程式碼整體看起來更加清晰。如下為一個複雜npm script：

"scripts": {
    "eslint": "# 校驗js\n  eslint *.js",
    "preeslint": "echo 'preeslint'",
    "lint:css": "# 校驗css \t stylelint *.css",
    "lint:json": "jsonlint *.json",
    "lint:markdown": "markdownlint *.md",
    "test": "cross-env NODE_ENV=test mocha test/",
    "all": "npm-run-all lint:css lint:json lint:markdown",
    "all2": "npm-run-all lint:*",
    "//": "test",
    "lint:js:fix": "npm run eslint --fix",
    "pretest": "npm run all2",
    "precover": "npm run cover:cleanup",
    "cover": "nyc --reporter=html npm test",
    "cover:cleanup": "rimraf coverage && rimraf .nyc_output",
    "cover:archive": "cross-var make-dir \"coverage_arhive/$npm_package_version && cpr coverage/* coverage_arhive/$npm_package_version\"",
    "postcover": "npm-run-all cover:archive  --parallel cover:serve cover:open",
    "dummy": "cross-var echo $npm_package_version",
    "cover:serve": "cross-var http-server coverage_arhive/$npm_package_verdsion -p $npm_package_config_port",
    "cover:open": "cross-var opn http://localhost:$npm_package_config_port"
  },
複製程式碼

我們就以上進行修改

安裝 scripty

$ npm install scripty --save-dev
複製程式碼

建立目錄和檔案

這裡建立的目錄和檔案要與命令一一對應。如：

$ mkdir scripts/cover.sh
$ mkdir scripts/cover/serve.sh
$ mkdir scripts/cover/open.sh
複製程式碼

注意 指令碼需增加可執行許可權是必須的，否則 scripty 執行時會報錯

$ chmod -R a+x scripts/**/*.sh
複製程式碼

修改 .sh檔案

// scripts/cover.sh

#! /usr/bin/env bash

# remove old coverage reports
rimraf coverage && rimraf .nyc_output

# run test and collect new coverage
nyc --reporter=html npm test

make-dir -p coverage_arhive/$npm_package_version

cp coverage/* coverage_arhive/$npm_package_version

npm-run-all --parallel cover:serve cover:open

// scripts/cover/serve.sh

#!/usr/bin/env bash

http-server coverage_arhive/$npm_package_verdsion -p $npm_package_config_port

// scripts/cover/open.sh

#!/usr/bin/env bash

sleep 1

opn http://localhost:$npm_package_config_port

複製程式碼

*** shell 指令碼里面是可以隨意使用 npm 的內建變數和自定義變數的***

修改 package.json

"scripts": {
    "eslint": "# 校驗js\n  eslint *.js",
    "preeslint": "echo 'preeslint'",
    "lint:css": "# 校驗css \t stylelint *.css",
    "lint:json": "jsonlint *.json",
    "lint:markdown": "markdownlint *.md",
    "test": "cross-env NODE_ENV=test mocha test/",
    "all": "npm-run-all lint:css lint:json lint:markdown",
    "all2": "npm-run-all lint:*",
    "//": "test",
    "lint:js:fix": "npm run eslint --fix",
    "pretest": "npm run all2",
    "dummy": "cross-var echo $npm_package_version",
    "cover": "scripty",
    "cover:serve": "scripty",
    "cover:open": "scripty"
 }
複製程式碼

測試過程

$ npm run cover

$ init-npm@0.1.1 cover /vipkid/learn/npm/init-npm
$ scripty

$ Executing "/vipkid/learn/npm/init-npm/scripts/cover.sh":

$ #! /usr/bin/env bash
$
$ 
$ ...
$ Starting up http-server, serving coverage_arhive/
Available on:
  http://127.0.0.1:3000
  http://192.168.48.65:3000
Hit CTRL-C to stop the server

複製程式碼

如有侵權，請發郵箱至wk_daxiangmubu@163.com 或留言，本人會在第一時間與您聯絡，謝謝！！

長按二維碼關注我們，瞭解最新前端資訊

相關文章