钩子的使用于 npm script

栏目: CSS · 发布时间: 5年前

内容简介:本文已同步在我的博客:钩子,命令的执行增加类似于生命周期的一种机制。本章节主要说下拿

本文已同步在我的博客: ruizhengyun.cn/blog/post/e…

钩子,命令的执行增加类似于生命周期的一种机制。本章节主要说下 prepost 钩子脚本。其作用或特性体现在一些操作前做检查、一些操作后做清理等场景。

举例子

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 (并行),输出如图

钩子的使用于 npm script

再探 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.jsadd.test.js
  • 引入覆盖率收集工具 nyc ,是覆盖率工具istanbul 的命令行版本;
  • 引入一个包 open-cli 打开任意工具 open 的命令版本(打开 html 文件的工具),作者是 sindresorhus ,一位前端社区非常高产的工程师。

准备工作

1. add.jsadd.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

覆盖率查看

钩子的使用于 npm script

以上所述就是小编给大家介绍的《钩子的使用于 npm script》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

视觉SLAM十四讲

视觉SLAM十四讲

高翔、张涛、等 / 电子工业出版社 / 2017-3 / 75

《视觉SLAM十四讲:从理论到实践》系统介绍了视觉SLAM(同时定位与地图构建)所需的基本知识与核心算法,既包括数学理论基础,如三维空间的刚体运动、非线性优化,又包括计算机视觉的算法实现,例如多视图几何、回环检测等。此外,还提供了大量的实例代码供读者学习研究,从而更深入地掌握这些内容。 《视觉SLAM十四讲:从理论到实践》可以作为对SLAM 感兴趣的研究人员的入门自学材料,也可以作为SLAM......一起来看看 《视觉SLAM十四讲》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具