学习自 《用 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 文件了