npm script 複雜場景的應用

隨着功能和業務的不斷複雜，npm script 將不斷增長和改寫，package.json 中 script 會愈加臃腫和嘈亂，也不便於閱讀。這個時候，咱們就會想到把 npm script 抽到文件當中。

scripty 解決方案

npm 社區中有 scripty 就能助咱們一臂之力。看看怎麼作的

安裝依賴包

npm install scripty -D
// 或
yarn add scripty -D
複製代碼

建立目錄和文件

1.目錄 scripts 和 scripts/cover 的建立。scripts 目錄是依賴包 scripty 默認配置目錄，也能夠設置別名。

mkdir -p scripts/cover
// 或
mkdir scripts && mkdir scripts/cover
複製代碼

2.文件 scripts/cover.sh、scripts/cover/server.sh 和 scripts/cover/open.sh 的建立。能夠將 cover:clean、cover:archive、precover、cover 和 postcover 抽取到一個文件（cover.sh）中。

// 抽取文件的建立
touch scripts/cover.sh
touch scripts/cover/server.sh
touch scripts/cover/open.sh
複製代碼

3.賦予權限，不然有會權限不足致使的錯誤。不瞭解其語法也不要緊。

// 給 *.sh 腳本賦予可執行權限
chmod -R a+x scripts/**/*.sh
複製代碼

編寫

1.scripts/cover.sh 文件內容

#!/usr/bin/env bash 
# precover(cover:clean) 清理 覆蓋率報告
rimraf coverage && rimraf .nyc_output

# cover 生成 覆蓋率報告
nyc --reporter=html npm run test

# cover:archive 歸檔 覆蓋率報告 
cross-var \"make-dir coverage_archive/$npm_package_version && cross-var cpr coverage coverage_archive/$npm_package_version -o\" # postcover 執行並打開覆蓋率報告 npm-run-all --parallel cover:server cover:open 複製代碼

2.scripts/cover/server.sh 文件內容

#!/usr/bin/env bash 
cross-var http-server coverage_archive/$npm_package_version -p $npm_package_config_port
複製代碼

3.scripts/cover/open.sh 文件內容

#!/usr/bin/env bash 
sleep 1

cross-var open http://localhost:$npm_package_config_port
複製代碼

4. package.json 文件中 scripts 內容

"scripts": {    
    "//scripty": "# 複雜命令抽取",
    "cover": "scripty",
    "cover:server": "scripty",
    "cover:open": "scripty"
}
複製代碼

剖析

• *.sh 文件咱們用的是 Node.js 寫的；
• sleep 1 同步延遲做用，相似於 PHP 語言中的 sleep，確保文件系統寫入；
• package.json 中 scripts 變得簡潔多了；

執行

npm run cover
複製代碼

Node.js 解決方案

用 Node.js 來解決有兩個好處：

• 能夠實現跨平臺（還記得咱們之間npm script 跨端兼容的實現嗎）；
• 上手快；

注：基於依賴包 scripty

安裝依賴

npm install shelljs chalk -D
// 或
yarn add shell chalk -D
複製代碼

編寫

1.目錄與文件的建立

// 目錄建立
mkdir scripts
// 文件建立
touch scripts/cover.js
複製代碼

2. scripts/cover.js 文件內容（替換 cover/cover.sh）

const { rm, cp, mkdir, exec } = require('shelljs');
const chalk = require('chalk');
const log = function (ctx, fn) {
    fn = fn ? fn : chalk.green;
    console.log(fn(ctx));
};


log('清理覆蓋率報告', chalk.blue);
rm('-rf', 'coverage');
rm('-rf', '.nyc_output');

log('生成覆蓋率報告');
exec('nyc --reporter=html npm run test');

log('歸檔覆蓋率報告');
mkdir('-p', 'coverage_archive/0.0.2');
cp('-r', 'coverage/*', 'coverage_archive/0.0.2');

log('執行並打開覆蓋率報告');
exec('npm-run-all --parallel cover:server cover:open');
複製代碼

3.package.json 中 scripts

"scripts": {
    "cover": "node scripts/cover.js",
    "cover:server": "scripty",
    "cover:open": "scripty"
}
複製代碼

剖析

• script/server.sh 和 script/open.sh 文件仍是須要的
• 在mkdir 和 cp 命令（shelljs）中，預約義變量 $npm_package_version 不識別；

執行

npm run cover
複製代碼

你能夠...

上一篇：npm script 的文件監聽和自動刷新

下一篇：npm script 應用在 git hooks 中

目錄：npm script 小書