一. 前言
Node.js 丰富的生态能赋予我们更强的能力,对于前端工程师来说,使用 Node.js 来编写复杂的 npm script 具有明显的 2 个优势:首先,编写简单的工具脚本对前端工程师来说额外的学习成本很低甚至可以忽略不计,其次,因为 Node.js 本身是跨平台的,用它编写的脚本出现跨平台兼容问题的概率很小。
虽然 npm script 提供了很大的灵活性,但对于一些复杂或需要跨平台的任务而言,有时候它可能会显得不够强大和灵活。
在这种情况下,我们可以使用 Node.js 脚本以及强大的工具库 ShellJS 来替代复杂的 npm script。
下面我们就一起探索下,如何把使用 shell 编写的 cover 脚本改写成 Node.js 脚本,在 Node.js 脚本中我们也能体味到 shelljs 这个工具包的强大。
二. shelljs 是什么
ShellJS 是一个基于 Node.js 的模块,它提供了一组简洁而强大的方法,可以让开发人员在 Node.js 环境中执行和处理 shell 命令。它模拟了 Unix shell 的常用命令,可以轻松地在脚本中执行命令、处理文件和目录、进行文件操作等。
ShellJS 的设计目标是提供一种便捷的方式来在 Node.js 中执行 shell 命令,而无需依赖外部工具或复杂的语法。它提供了很多常见的 shell 命令,如 cd
、pwd
、ls
、cp
、rm
、exec
等,并且提供了跨平台的支持,可以在 Windows、Mac 和 Linux 等不同操作系统上运行。
使用 ShellJS,开发人员可以轻松地在 Node.js 脚本中执行命令,从而简化了构建和部署过程。它提供了丰富的方法来处理文件和目录,例如创建、复制、移动、删除文件或目录,以及读取、写入文件等操作。同时,ShellJS 还提供了一些方便的工具方法,如获取命令执行的输出、处理错误和异常等。
三. 如何使用 shelljs
1. 安装 shelljs 依赖
使用如下命令安装 shelljs 到项目依赖中:
npm i shelljs -D
# npm install shelljs --save-dev
# yarn add shelljs -D
此外,我们计划使用 chalk 来给输出加点颜色,让脚本变的更有趣,同样安装到 devDependencies 里面:
npm i chalk -D
# npm install chalk --save-dev
# yarn add chalk -D
2. 创建 Node.js 脚本
touch scripts/cover.js
3. 用 Node.js 实现同等功能
shelljs 为我们提供了各种常见命令的跨平台支持,比如 cp、mkdir、rm、cd 等命令,此外,理论上你可以在 Node.js 脚本中使用任何 npmjs.com 上能找到的包。清理归档目录、运行测试、归档并预览覆盖率报告的完整 Node.js 代码如下:
const { rm, cp, mkdir, exec, echo } = require('shelljs');
const chalk = require('chalk');
console.log(chalk.green('1. remove old coverage reports...'));
rm('-rf', 'coverage');
rm('-rf', '.nyc_output');
console.log(chalk.green('2. run test and collect new coverage...'));
exec('nyc --reporter=html npm run test');
console.log(chalk.green('3. archive coverage report by version...'));
mkdir('-p', 'coverage_archive/$npm_package_version');
cp('-r', 'coverage/*', 'coverage_archive/$npm_package_version');
console.log(chalk.green('4. open coverage report for preview...'));
exec('npm-run-all --parallel cover:serve cover:open');
关于改动的几点说明:
-
简单的文件系统操作,建议直接使用 shelljs 提供的 cp、rm 等替换;
-
部分稍复杂的命令,比如 nyc 可以使用 exec 来执行,也可以使用 istanbul 包来完成;
-
在 exec 中也可以大胆的使用 npm script 运行时的环境变量,比如
$npm_package_version
;
4. 让 package.json 指向新脚本
准备好 Node.js 脚本之后,我们需要修改 package.json 里面的命令,使其运行该脚本:
"scripts": {
"test": "cross-env NODE_ENV=test mocha tests/",
- "cover": "scripty",
+ "cover": "node scripts/cover.js",
"cover:open": "scripty"
},
5. 测试 cover 命名
重新运行 npm run cover 命令,不出意外的话,基本功能是正常的,除了我们新加的绿色输出,如下图:
这里只是简单展示了如何组织 Node.js 脚本并且让其与 npm script 关联起来,至于具体在脚本中做什么事情,大家自由发挥吧。
四. 总结
在本文中,我们介绍了如何使用 Node.js 脚本结合 ShellJS 来替代复杂的 npm script。通过使用 ShellJS,我们可以在 Node.js 环境中执行和处理 shell 命令,这样可以更好地控制和定制我们的构建和部署流程。
使用 Node.js 脚本替代复杂的 npm script,有以下几点优势:
-
强大而灵活
-
跨平台支持
-
简化流程
总之,使用 Node.js 脚本和 ShellJS 是优化和扩展前端开发流程的有效方法。通过替代复杂的 npm script,我们可以更好地控制和定制我们的构建和部署任务,提高工作效率。