使用 npm script 的钩子
使用 npm script 的钩子
为了方便开发者自定义,npm script 的设计者为命令的执行增加了类似生命周期的机制,具体来说就是 pre
和 post
钩子脚本。这种特性在某些操作前需要做检查、某些操作后需要做清理的情况下非常有用。
举例来说,运行 npm run test 的时候,分 3 个阶段:
- 检查 scripts 对象中是否存在 pretest 命令,如果有,先执行该命令;
- 检查是否有 test 命令,有的话运行 test 命令,没有的话报错;
- 检查是否存在 posttest 命令,如果有,执行 posttest 命令;
到目前为止我们所覆盖的前端工作流包含了代码检查和测试自动化运行环节,衡量测试效果的重要指标是测试覆盖率,而收集覆盖率也非常的简单,下面逐步讲解如何把代码检查、测试运行、覆盖率收集这些步骤串起来。
改造 test 命令
首先,我们基于钩子机制对现有的 scripts 做以下 3 点重构,把代码检查和测试运行串起来:
- 增加简单的 lint 命令,并行运行所有的 lint 子命令;
- 增加 pretest 钩子,在其中运行 lint 命令;
- 把 test 替换为更简单的
mocha tests/
;
代码 diff 如下:
diff --git a/package.json b/package.json
index 8f67810..d297f2e 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,17 @@
+ "lint": "npm-run-all --parallel lint:*","lint:js": "eslint *.js","lint:js:fix": "npm run lint:js -- --fix","lint:css": "stylelint *.less","lint:json": "jsonlint --quiet *.json","lint:markdown": "markdownlint --config .markdownlint.json *.md",
- "mocha": "mocha tests/",
- "test": "# 运行所有代码检查和单元测试 \n npm-run-all --parallel lint:* mocha"
+ "pretest": "npm run lint",
+ "test": "mocha tests/",
当我们运行 npm test 的时候,会先自动执行 pretest 里面的 lint,实际输出如下:
增加覆盖率收集
接下来,我们把运行测试和覆盖率收集串起来,具体做法是:增加覆盖率收集的命令,并且覆盖率收集完毕之后自动打开 html 版本的覆盖率报告。要实现目标,我们需要引入两个新工具:
- 覆盖率收集工具 nyc,是覆盖率收集工具 istanbul 的命令行版本,istanbul 支持生成各种格式的覆盖率报告,我已经使用多年;
- 打开 html 文件的工具 opn-cli,是能够打开任意程序的工具 opn 的命令行版本,作者是前端社区非常高产的 Sindre Sorhus,它在 npm 上发布了超过 1000 个包,并且质量都很不错。
使用如下命令安装依赖:
npm i nyc opn-cli -D
然后在 package.json 增加 nyc 的配置,告诉 nyc 该忽略哪些文件。最后是在 scripts 中新增 3 条命令:
- precover,收集覆盖率之前把之前的覆盖率报告目录清理掉;
- cover,直接调用 nyc,让其生成 html 格式的覆盖率报告;
- postcover,清理掉临时文件,并且在浏览器中预览覆盖率报告;
具体 diff 如下:
diff --git a/package.json b/package.json
index 8f67810..d297f2e 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,17 @@scripts: {
+ "precover": "rm -rf coverage",
+ "cover": "nyc --reporter=html npm test",
+ "postcover": "rm -rf .nyc_output && opn coverage/index.html"},
@@ -22,7 +26,15 @@"devDependencies": {"npm-run-all": "^4.1.2",
+ "nyc": "^11.3.0",
+ "opn-cli": "^3.1.0","stylelint": "^8.2.0","stylelint-config-standard": "^17.0.0"
+ },
+ "nyc": {
+ "exclude": [
+ "**/*.spec.js",
+ ".*.js"
+ ]}}
改完之后,我们可以直接运行 npm run cover,运行的详细截图如下:
TIP#7:到目前为止,我们的工作流中已经包含代码检查、测试运行、覆盖率收集、覆盖率查看等功能,你是不是可以用来改进下自己的工作流呢?
本节用到的代码见 GitHub,想边看边动手练习的同学可以拉下来自己改,注意切换到正确的分支
04-pre-and-post-hooks
。
使用 npm script 的钩子相关推荐
- npm run buil构建后页面白屏_从Npm Script到Webpack,6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比 小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
- npm script 的实践
打包环节 要实现 假设我们的项目结构是这样的 src ├── images │ ├── a.png │ └── b.png ├── index.html ├── scripts │ └── index ...
- 在 git hooks 中运行 npm script
在 git hooks 中运行 npm script 严肃的研发团队都会使用 Git 之类的版本管理系统来管理代码,随着 GitHub 的广受欢迎,相信大家对 Git 并不陌生.Git 在代码版本管理 ...
- 初识 npm script : 用 npm init 快速创建项目
初识 npm script 首先介绍创建 package.json 文件的科学方法,目标是掌握 npm init 命令.然后,通过在终端中运行自动生成的 test 命令,详细讲解 npm 脚本基本执行 ...
- 用 npm script 实现构建流水线
用 npm script 实现构建流水线 在现代前端项目的交付工作流中,部署前最关键的环节就是构建,构建环节要完成的事情通常包括: 源代码预编译:比如 less.sass.typescript: 图片 ...
- 从Npm Script到Webpack,6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比 小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
- npm link run npm script
npm link & run npm script https://blog.csdn.net/juhaotian/article/details/78672390 npm link命令可以将 ...
- 用 node.js 脚本替代复杂的 npm script
用 node.js 脚本替代复杂的 npm script Node.js 丰富的生态能赋予我们更强的能力,对于前端工程师来说,使用 Node.js 来编写复杂的 npm script 具有明显的 2 ...
- 监听文件变化并自动运行 npm script
监听文件变化并自动运行 npm script 软件工程师做的事情基本都是在实现自动化,比如各种业务系统是为了业务运转的自动化,部署系统是为了运维的自动化,对于开发者本身,自动化也是提升效率的关键环节, ...
最新文章
- 用Unity和C#创建在线多人游戏学习教程
- mem 族函数的实现
- 注意android辅助服务事件不能用于保存
- ASP编程中的Microsoft JScript 编译错误 错误 '800a03ec'缺少;的解决方法.
- ABAP Netweaver上调用Java程序
- 怎样用Jquery实现拖拽层,并实现网站自定义化模块功能?
- android 知识体系
- ZZULIOJ ASCII码排序(多实例测试)
- 01-04 Linux常用命令-网络相关
- 利用jsp和servlet,MySQL实现简易报表
- 6.6 BERT家族02——sentence-BERT、BioBERT
- poj - 3723 Conscription(最大权森林)
- 获取两个数组的差 php,php-获取2个数组之间的差
- 四则运算界面版 结对子
- 使用AUTODYN超高速撞击仿真
- 解决网站iframe挂马方法
- 计算机网络之数据链路层信道划分介质访问【408_3】
- 【9】数据可视化:基于 Echarts + Python 实现的动态实时大屏 - 酒店行业
- vite+vue3+axios+ts入门mockjs以及深入学习,直接一步精通
- 泰肯星球(Token Planets)基于EOS区块链技术的虚拟游戏