npm script 复杂场景的应用

2,490 阅读1分钟

随着功能和业务的不断复杂,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
  1. 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
  1. 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.shscript/open.sh 文件还是需要的
  • mkdircp 命令(shelljs)中,预定义变量 $npm_package_version 不识别;

执行

npm run cover

你可以...

上一篇:npm script 的文件监听和自动刷新

下一篇:npm script 应用在 git hooks 中

目录:npm script 小书