This article has been synchronized in my blog: ruizhengyun. Cn/blog/post/e…

Hooks, the execution of commands adds a life-cycle like mechanism. This section focuses on pre and POST hook scripts. Its functions or features are reflected in scenarios such as checking before some operations and clearing after some operations.

For example,

In the case of Lint :js, running NPM run Lint :js has three phases

  • Check if there areprelint:jsCommand, there is execution;
  • Check if there arelint:jsCommand, execute, no error reported;
  • Check if there arepostlint:jsCommand, there is execution;

newprelint:js

"scripts": {... ."prelint:js": "# check.css \ NPM run lint: CSS & wait"."lint:js": "# check.js code programming style \n eslint. / SRC /**/*.js". }Copy the code

NPM run Lint :js when running NPM run lint:js, run NPM run lint: CSS (parallel) in prelint:js

revisitedpostlint:js

"scripts": {... ."prelint:js": "# check.css \ NPM run lint: CSS & wait"."lint:js": "# check.js code programming style \n eslint. / SRC /**/*.js"."postlint:js": "# callback \n rm-rf aaa.js". }Copy the code

New test coverage

This chapter is not about testing, but shows the use of NPM Script in the test coverage area.

Implementation process:

  • Commands to add coverage collection;
  • Collection coverage;
  • Automatically open HTML to display coverage report;

Specific steps

  • Creating the Tests folder
  • newadd.js 和 add.test.js
  • Introduction of the coverage collector NYC, a command line version of the coverage tool Istanbul;
  • Importing a packageopen-cliOpen any toolopenCommand version (tools to open HTML files), the author issindresorhus, aThe front-end community is very productiveEngineers.

The preparatory work

1. The add. Js and add. Test. Js

// add.js
const add = (a, b) = > {
    return a + b;
}

module.exports = add;
Copy the code
// add.test.js
var add = require('./add.js');
var expect = require('chai').expect;

describe('Test of addition function'.function() {
  it('1 plus 1 should be equal to 2'..function() {
    expect(add(1.1)).to.be.equal(2);
  });
});
Copy the code

2. Import dependency packages

npm i -D nyc open-cli
Copy the code

3. Scripting

// 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": "# parallel check all code programming styles \ 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": "# check.js code programming style \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": "# Run all code checks and unit tests \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"]}}Copy the code

4. Under the instructions

  • Precover: Clear the previous coverage report directory before collecting coverage
  • Cover, which calls NYC directly to generate an HTML coverage report;
  • Postcover, which cleans up temporary files and previews coverage reports in the browser;

5. Run NPM run cover

Coverage collection

Coverage view

summary

So far, the front-end workflow contains

  • Code review
  • A test run
  • Coverage collection and coverage viewing

Can we improve our own workflow?

You can…

Using NPM script parameters

Next: Use of NPM Script environment variables

Directory: NPM Script small book