内容简介:本文已同步在我的博客:钩子,命令的执行增加类似于生命周期的一种机制。本章节主要说下拿
本文已同步在我的博客: ruizhengyun.cn/blog/post/e…
钩子,命令的执行增加类似于生命周期的一种机制。本章节主要说下 pre
和 post
钩子脚本。其作用或特性体现在一些操作前做检查、一些操作后做清理等场景。
举例子
拿 lint:js
来说,运行 npm run lint:js
分 3 个阶段
prelint:js lint:js postlint:js
新增 prelint:js
"scripts": { ..., "prelint:js": "# 检查 .js 前先自动检查 .css \n npm run lint:css & wait", "lint:js": "# 检查 .js 代码编程风格 \n eslint ./src/**/*.js", ... } 复制代码
当运行 npm run lint:js
的时候,先回自动执行 prelint:js
里面的 npm run lint:css
(并行),输出如图
再探 postlint:js
"scripts": { ..., "prelint:js": "# 检查 .js 前先自动检查 .css \n npm run lint:css & wait", "lint:js": "# 检查 .js 代码编程风格 \n eslint ./src/**/*.js", "postlint:js": "# 回调 \n rm -rf aaa.js", ... } 复制代码
新增测试覆盖率
本章不是说测试,只是显示 npm script 在测试覆盖率这块的使用场景。
实现流程:
- 增加覆盖率收集的命令;
- 收集覆盖率;
- 自动打开 html 显示覆盖率报告;
具体步骤
- 新建 tests 文件夹
- 新增
add.js
和add.test.js
- 引入覆盖率收集工具 nyc ,是覆盖率工具istanbul 的命令行版本;
- 引入一个包
open-cli
打开任意工具 open 的命令版本(打开 html 文件的工具),作者是 sindresorhus ,一位前端社区非常高产的工程师。
准备工作
1. add.js
和 add.test.js
// add.js const add = (a, b) => { return a + b; } module.exports = add; 复制代码
// add.test.js var add = require('./add.js'); var expect = require('chai').expect; describe('加法函数的测试', function() { it('1 加 1 应该等于 2', function() { expect(add(1, 1)).to.be.equal(2); }); }); 复制代码
2.引入依赖包
npm i -D nyc open-cli 复制代码
3.脚本编写
// package.json { "scripts": { "lint-cx:all": "npm-run-all lint:*", "lint-cx": "npm run lint:js && npm run lint:jsx && npm run lint:css && npm run lint:json && npm run lint:markdown", "lint-bx:all": "# 并行检查所有代码编程风格 \n npm-run-all --parallel lint:*", "lint-bx": "npm run lint:js & npm run lint:jsx & npm run lint:css & npm run lint:json & npm run lint:markdown & wait", "lint:js": "# 检查 .js 代码编程风格 \n eslint ./src/**/*.js & wait", "lint-fix:js": "npm run lint:js -- --fix", "lint:jsx": "eslint ./src/**/*.jsx & wait", "lint:css": "stylelint ./src/**/*.{html,css,less,scss} & wait", "lint-fix:css": "npm run lint:css -- --fix", "lint:json": "jsonlint --quiet ./src/**/*.json", "lint:markdown": "markdownlint --config .markdownlint.json ./src/**/*.md", "mocha": "mocha tests/", "test": "# 运行所有代码检查和单元测试 \n npm-run-all --parallel lint:* mocha", "precover": "rm -rf coverage", "cover": "nyc --reporter=html npm test", "postcover": "rm -rf .nyc_output && open coverage/index.html" }, "nyc": { "exclude": [ "**/*.spec.js", ".*.js" ] } } 复制代码
4.说明下
- precover,收集覆盖率之前把之前的覆盖率报告目录清理掉;
- cover,直接调用 nyc,让其生成 html 格式的覆盖率报告;
- postcover,清理掉临时文件,并且在浏览器中预览覆盖率报告;
5.执行 npm run cover
覆盖率收集
覆盖率查看
以上所述就是小编给大家介绍的《钩子的使用于 npm script》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- VUE路由钩子及使用场景
- Thinkphp实战利用钩子使用行为扩展 (Hook)
- 使用钩子促进OAth 2.0与OpenID连接
- git各命令的原理和初级使用,顺手玩下git钩子
- 队列与钩子
- Vue 组件生命周期钩子函数
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
视觉SLAM十四讲
高翔、张涛、等 / 电子工业出版社 / 2017-3 / 75
《视觉SLAM十四讲:从理论到实践》系统介绍了视觉SLAM(同时定位与地图构建)所需的基本知识与核心算法,既包括数学理论基础,如三维空间的刚体运动、非线性优化,又包括计算机视觉的算法实现,例如多视图几何、回环检测等。此外,还提供了大量的实例代码供读者学习研究,从而更深入地掌握这些内容。 《视觉SLAM十四讲:从理论到实践》可以作为对SLAM 感兴趣的研究人员的入门自学材料,也可以作为SLAM......一起来看看 《视觉SLAM十四讲》 这本书的介绍吧!