钩子的使用于 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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

模糊数学基础及实用算法

模糊数学基础及实用算法

李鸿吉编 / 科学出版社 / 2005-1 / 55.00元

本书开发了模糊数学常用的计算机程序,并以大量的算例系统地介绍了模糊数学的实用算法。本书可以作为模糊数学的应用程序包,在详细解释源代码的同时,对应用程序开发所用到的Visual Basic 6.0方法做了系统介绍,其目的是为读者做进一步的自主开发提供便利。本书所提供的源程序可以作为读者自主开发的素材。本书配有光盘,分章节提供程序源代码。 本书可以作为大专院校、培训班的教学参考书。对需......一起来看看 《模糊数学基础及实用算法》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具