基于 npm 的 自动化构建 的简单学习

学习自 《用 npm script 打造超溜的前端工作流》

1. 从最简单的 lint 开始

yarn add eslint --dev

yarn eslint --init     // 这里还可以使用 npx eslint --init ，都会直接去 node_modules/.bin 目录下寻找能够运行的命令，就能够生成 想要的 eslint 配置文件

"scripts": {
    "eslint": "eslint src/*.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

yarn eslint

一次执行多个命令

{
  "name": "script-npm",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "lint:js": "eslint src/*.js",
    "lint:css": "stylelint src/*.less",
    "test": "yarn lint:js && yarn lint:css"
  },
  "devDependencies": {
    "eslint": "^7.1.0",
    "stylelint": "^8.2.0",
    "stylelint-config-standard": "^17.0.0"
  }
}

创建 .stylelintrc.json

{
  "extends": "stylelint-config-standard"
}

yarn test     // 就可以执行 两个命令了 但是目前是 串行的，也就是一个执行 报错了，接下来就不会执行

"scripts": {
    "lint:js": "eslint src/*.js",
    "lint:js:fix": "yarn lint:js -- --fix",
    "lint:css": "stylelint src/*.less",
    "test": "yarn lint:css & yarn lint:js:fix"
  },

从 && 改为 & 之后，就可以 不受前面执行结果的干扰了

这里的 "lint:js:fix": "yarn lint:js -- --fix", 中 --fix 前面的 -- 表示 给 前面的命令传递参数 也就变成了

"lint:js:fix": "eslint src/*.js --fix",

2. 监听 文件的 变化，然后 动态的 进行 检查

yarn add onchange --dev  // 监听变化 的包

"scripts": {
    "lint:js": "eslint src/*.js",
    "lint:css": "stylelint src/*.less",
    "lint:js:fix": "yarn lint:js -- --fix",
    "watch:lint": "onchange -i \"**/*.js\" \"**/*.less\" -- yarn lint",
    "lint": "yarn lint:js & yarn lint:css",
    "test": "yarn watch:lint"
  },

yarn test  // 就可以启动 监听，然后 就可以 快乐的修改 自己的 js 和 less 文件了