npm script 跨端兼容的實現

本人用的是 Mac，因此上面幾章 npm script 都順利運行（前半生一路開掛），可是仍是有使用 Windows 系統的開發小夥伴（多句嘴，經濟容許仍是建議購置一臺 Mac，懂得投資本身）。

那下面就說說在 Windows 平臺下，咱們的 npm script 還如何順利地運行。

注：Windows 自帶的 cmd 是個不靠譜的傢伙，建議使用 git bash 來代替 cmd 運行 npm script，別說我沒告訴過你。

經常使用命令的替代者

前面涉及到文件操做的命令有文件和目錄建立、刪除和複製等操做，npm 社區對於這些也提供了跨平臺的兼容包，一看來看看吧

• 目錄新增 make-dir-cli，同等 mkdir -p;
• 文件或目錄的刪除 rimraf 或 del-cli，同等 rm -rf;
• 文件或目錄的複製 cpr，同等 cp -r;
• 跨平臺的變量引用，變量寫法統一，cross-var，好比 Windows 寫法 %npm_package_name%，Linux 寫法 $npm_package_name;

添加依賴包

npm install make-dir-cli rimraf cpr cross-var -D 
// 或
yarn add make-dir-cli rimraf cpr cross-var -D 
複製代碼

命令改寫

1.文件 package.json

// 不兼容 Windows
"scripts": {
    ...,
    "//": "# 不兼容 Windows",
    "cover:cleanup": "# 清理覆蓋率報告- \n rm -rf coverage && rm -rf .nyc_output",
    "cover": "# 生成覆蓋率報告 \n nyc --reporter=html npm run test",
    "cover:archive": "# 歸檔覆蓋率報告 \n mkdir -p coverage_archive/$npm_package_version && cp -r coverage/* coverage_archive/$npm_package_version",
    "cover:server": "http-server coverage_archive/$npm_package_version -p $npm_package_config_port",
    "cover:open": "open http://localhost:$npm_package_config_port",
    "postcover": "# 執行並打開覆蓋率報告 \n npm-run-all cover:archive cover:cleanup --parallel cover:server cover:open"
}

// 兼容 Windows
"scripts": {
    ...,
    "//": "# 兼容 Windows",
    "cover:cleanup": "# 清理覆蓋率報告- \n rimraf coverage && rimraf .nyc_output",
    "cover": "# 生成覆蓋率報告 \n nyc --reporter=html npm run test",
    "cover:archive": "# 歸檔覆蓋率報告 \n cross-var \"make-dir coverage_archive/$npm_package_version && cpr coverage coverage_archive/$npm_package_version -o\"",
    "cover:server": "cross-var http-server coverage_archive/$npm_package_version -p $npm_package_config_port",
    "cover:open": "cross-var open http://localhost:$npm_package_config_port",
    "precover": "npm run cover:cleanup",
    "postcover": "# 執行並打開覆蓋率報告 \n npm-run-all cover:archive --parallel cover:server cover:open"
}
複製代碼

2.執行

npm run cover
複製代碼

命令剖析

• 文件或目錄的複製，Linux 寫法是 cp -r coverage/* coverage_archive/$npm_package_version，Windows 寫法 cpr coverage coverage_archive/$npm_package_version -o。細節有兩點注意：第一是參數位置，Linux 平臺 -p 緊跟在 cp 後面，Windows 平臺 -o 在 cpr 末尾；第二是複製內容路徑寫法，Linux 平臺 coverage/*，Windows 平臺 coverage;
• 把 cover:cleanup 從 postcover 移出來放入 precover 裏執行，避免 cpr 沒歸檔完就被清空的狀況；
• 使用了變量的命令，整個命令用雙引號包起來，雙引號前記得加 \ 轉義，而後開頭記得加上 cross-var；

環境變量跨平臺設置

開門見山，使用 cross-env 來實現。

添加依賴包

npm i cross-env -D
// 或
yarn add cross-env -D
複製代碼

命令改寫

"scripts": {
    "test": "cross-env NODE_ENV=test mocha test/"
}
複製代碼

你能夠...

上一篇：npm script 環境變量的使用

下一篇：npm script 命令補全的實現

目錄：npm script 小書