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 小书