npm script 鉤子的使用

時間 2019-11-07

標籤 npm script 鉤子使用简体版

原文原文鏈接

本文已同步在個人博客: ruizhengyun.cn/blog/post/e…javascript

鉤子，命令的執行增長相似於生命週期的一種機制。本章節主要說下 pre 和 post 鉤子腳本。其做用或特性體如今一些操做前作檢查、一些操做後作清理等場景。css

舉例子

拿 lint:js 來講，運行 npm run lint:js 分 3 個階段html

檢查是否有 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 在測試覆蓋率這塊的使用場景。java

實現流程：

增長覆蓋率收集的命令；
收集覆蓋率；
自動打開 html 顯示覆蓋率報告；

具體步驟

新建 tests 文件夾
新增 add.js 和 add.test.js
引入覆蓋率收集工具 nyc，是覆蓋率工具 istanbul 的命令行版本；
引入一個包 open-cli 打開任意工具 open 的命令版本(打開 html 文件的工具)，做者是 sindresorhus，一位前端社區很是高產的工程師。

準備工做

1.add.js 和 add.test.jsgit

// 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.引入依賴包github

npm i -D nyc open-cli
複製代碼

3.腳本編寫npm

// 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"
        ] 
    }
}
複製代碼