npm script 钩子的使用

本文已同步在我的博客: 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

覆盖率收集

覆盖率查看

小结

目前为止，前端工作流中含有

• 代码检查
• 测试运行
• 覆盖率收集和覆盖率查看

那是不是可以改进下我们自己的工作流呢？

You can

上一章: npm script 参数的使用

下一章:npm script 环境变量的使用

转载于:https://juejin.im/post/5cecc71cf265da1bc552437b