feat(eslint): 增加 eslint，并保存是自动修复

.eslintrc.js

@@ -0,0 +1,28 @@
+console.log('--------eslint-------')
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    'eslint:recommended',
+    'standard'
+  ],
+  rules: {
+    'no-new': 0,
+    'max-len': 0,
+    'space-before-function-paren': 0,
+    'eslint-disable-next-line': 0,
+    'no-useless-escape': 0
+  },
+  globals: {
+    wx: true,
+    window: true,
+    document: true
+  },
+  parserOptions: {
+    parser: '@typescript-eslint/parser'
+  }
+}

.vscode/settings.json

@@ -0,0 +1,72 @@
+{
+  /*
+   * @description 编译器配置
+   * @param tabSize 默认tab为两个空格
+   * @param formatOnSave 保存时自动修复
+   */
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  /*
+   * @description eslint 配置
+   * @param alwaysShowStatus 配置
+   * @param autoFixOnSave 保存时自动修复
+   * @param validate 在vue中添加错误提示
+   */
+  "eslint.alwaysShowStatus": true,
+  "eslint.autoFixOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    {
+      "language": "vue",
+      "autoFix": true
+    }
+  ],
+  /*
+   * @description tslint 配置
+   * @param autoFixOnSave 保存时自动修复
+   * @param alwaysShowRuleFailuresAsWarnings 所有特征都是用 Warnings
+   */
+  "tslint.autoFixOnSave": true,
+  "tslint.alwaysShowRuleFailuresAsWarnings": true,
+  /*
+   * @description stylelint 配置
+   * @param autoFixOnSave 保存时自动修复
+   */
+  "stylelint.autoFixOnSave": true,
+  /*
+   * @description vetur 配置
+   */
+  "vetur.format.defaultFormatter.html": "prettier",
+  "vetur.format.defaultFormatterOptions": {
+    "prettier": {
+      "semi": false,
+      "singleQuote": true
+    }
+  },
+  /*
+   * @description 配置编辑器设置以覆盖某种语言
+   */
+  "[typescript]": {
+    // "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "eg2.tslint"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "eg2.tslint"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 🌟 新功能
 
 * **编译：** 提升编译速度，增加了 cache-loader dllPlugin threadLoader ([4d44ad7](https://github.com/luoxue-victor/learn_webpack/commit/4d44ad7))
+* **抽离 commander 层：** 修改脚手架二次调用的bug，增加了commander 层 ([b1aa749](https://github.com/luoxue-victor/learn_webpack/commit/b1aa749))
 * **多页面：** webpack配置多页面打包 ([86a0418](https://github.com/luoxue-victor/learn_webpack/commit/86a0418))
 * **课题2：** 完成基本构建，js、css打包进html，实现dev跟build环境 ([71a6a19](https://github.com/luoxue-victor/learn_webpack/commit/71a6a19))
 * **新增loader配置：** 增加ts、css、less、sass、postcss、babel配置 ([53616f8](https://github.com/luoxue-victor/learn_webpack/commit/53616f8))

bin/webpack-box.js

@@ -1,16 +1,18 @@
 #!/usr/bin/env node
-process.env.NODE_ENV = "none";
-const commandsName = ["build", "dev", 'dll', 'build:ssr', 'ssr:server'];
+process.env.NODE_ENV = 'none'
+const commandsName = ['build', 'dev', 'dll', 'build:ssr', 'ssr:server', 'lint']
 const {
   injectCommand,
   commandComplete,
   commandName
-} = require("../cli/CommandAPI");
-commandName.push(...commandsName);
+} = require('../cli/CommandAPI')
+
+const PluginAPI = require('../cli/PluginAPI')
+commandName.push(...commandsName)
 
 commandsName.forEach(name => {
-  const { command } = require(`../build/${name}`);
-  command(injectCommand);
-});
+  const { command } = require(`../build/${name}`)
+  command(injectCommand, PluginAPI)
+})
 
-commandComplete();
+commandComplete()

box.config.js

@@ -2,11 +2,11 @@ module.exports = function (config) {
   /**
    * @param {object} dll 开启差分包
    * @param {object} pages 多页面配置 通过 box run/build index 来使用
-   * @param {function} chainWebpack 
+   * @param {function} chainWebpack
    * @param {string} entry 入口
-   * @param {string} output 出口  
-   * @param {string} publicPath 
-   * @param {string} port 
+   * @param {string} output 出口
+   * @param {string} publicPath
+   * @param {string} port
    */
   return {
     entry: 'src/main.js',
@@ -20,15 +20,15 @@ module.exports = function (config) {
       index: {
         entry: 'src/main.js',
         template: 'public/index.html',
-        filename: 'index.html',
+        filename: 'index.html'
       },
       index2: {
         entry: 'src/main.js',
         template: 'public/index2.html',
-        filename: 'index2.html',
+        filename: 'index2.html'
       }
     },
     chainWebpack(config) {
     }
   }
-}
+}

build/base.js

@@ -1,8 +1,9 @@
 const { findSync } = require('../lib')
-const Config = require('webpack-chain');
-const config = new Config();
+const Config = require('webpack-chain')
+const config = new Config()
 const files = findSync('../config')
-const path = require('path');
+const path = require('path')
+const PluginAPI = require('../cli/PluginAPI')
 const resolve = (p) => {
   return path.join(process.cwd(), p)
 }
@@ -12,10 +13,10 @@ module.exports = (options) => {
 
   files.map(_ => {
     const name = path.basename(_, '.js')
-    return map.set(name, require(_)({config, resolve, options}))
+    return map.set(name, require(_)({ config, resolve, options, api: PluginAPI }))
   })
 
-  map.forEach(v => v());
-  
+  map.forEach(v => v())
+
   return config
-}
+}

build/build.js

@@ -1,61 +1,61 @@
-module.exports.command = function (injectCommand) {
-  injectCommand(function({ program,cleanArgs, boxConfig }) {
+module.exports.command = function(injectCommand) {
+  injectCommand(function({ program, cleanArgs, boxConfig }) {
     program
-      .command("build [app-page]")
-      .description(`构建生产环境`)
-      .option("-r, --report", "打包分析报告")
-      .option("-d, --dll", "合并差分包")
+      .command('build [app-page]')
+      .description('构建生产环境')
+      .option('-r, --report', '打包分析报告')
+      .option('-d, --dll', '合并差分包')
       .action(async (name, cmd) => {
-        const options = cleanArgs(cmd);
-        const args = Object.assign(options, { name }, boxConfig);
-        process.env.NODE_ENV = "production";
+        const options = cleanArgs(cmd)
+        const args = Object.assign(options, { name }, boxConfig)
+        process.env.NODE_ENV = 'production'
         if (!name && boxConfig.pages) {
-          args.clear = true;
+          args.clear = true
           Object.keys(boxConfig.pages).forEach(page => {
-            args.name = page;
-            action(args);
-          });
+            args.name = page
+            action(args)
+          })
         } else {
-          action(args);
+          action(args)
         }
-      });
-  });
+      })
+  })
 }
 
 function action(options) {
-  const rimraf = require("rimraf");
-  const ora = require("ora");
-  const chalk = require("chalk");
-  const path = require("path");
+  const rimraf = require('rimraf')
+  const ora = require('ora')
+  const chalk = require('chalk')
+  const path = require('path')
   // 删除 dist 目录
-  options.clear && rimraf.sync(path.join(process.cwd(), "dist"));
+  options.clear && rimraf.sync(path.join(process.cwd(), 'dist'))
 
-  const config = require("./base")(options);
-  const webpack = require("webpack");
-  const spinner = ora("开始构建项目...");
-  spinner.start();
+  const config = require('./base')(options)
+  const webpack = require('webpack')
+  const spinner = ora('开始构建项目...')
+  spinner.start()
 
-  if (typeof options.chainWebpack === "function") {
-    options.chainWebpack(config);
+  if (typeof options.chainWebpack === 'function') {
+    options.chainWebpack(config)
   }
 
   webpack(config.toConfig(), function(err, stats) {
-    spinner.stop();
-    if (err) throw err;
+    spinner.stop()
+    if (err) throw err
     process.stdout.write(
       stats.toString({
         colors: true,
         modules: false,
         children: false,
         chunks: false,
         chunkModules: false
-      }) + "\n\n"
-    );
+      }) + '\n\n'
+    )
 
     if (stats.hasErrors()) {
-      console.log(chalk.red("构建失败\n"));
-      process.exit(1);
+      console.log(chalk.red('构建失败\n'))
+      process.exit(1)
     }
-    console.log(chalk.cyan("build完成\n"));
-  });
+    console.log(chalk.cyan('build完成\n'))
+  })
 }