基於 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 文件了