随着功能和业务的不断复杂,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
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
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