Lint 中间件支持 webpack watch 实时检查

packages/dn-middleware-lint/.dawn/pipe.yml

@@ -5,6 +5,9 @@ dev:
   - name: $local
     disabled: false
     location: ./lib/index.js
+  #   realtime: true
+  # - name: webpack
+  #   watch: true
 
 #中间工程并非要发布到 CDN
 #不放到 aliyun group 下也不会发到 CND

packages/dn-middleware-lint/.dawn/rc.yml

@@ -0,0 +1,2 @@
+registry: https://registry.npmjs.com/
+server: https://alibaba.github.io/dawn

packages/dn-middleware-lint/.eslintrc.yml

@@ -1,2 +1,9 @@
 extends:
   - dawn
+env:
+  browser: true
+  node: true
+globals:
+  window: writable
+  $: writable
+  jQuery: writable

packages/dn-middleware-lint/.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+build/

packages/dn-middleware-lint/lib/.eslintrc.yml

@@ -1,2 +1,2 @@
-extends: 
+extends:
   - dawn

packages/dn-middleware-lint/lib/index.js

@@ -4,6 +4,19 @@ const utils = require('ntils');
 const yaml = require('js-yaml');
 const globby = require('globby');
 
+function modifyRulesConfig(opts, rules) {
+  // env
+  rules.env = {};
+  opts.env.split(',').forEach(e => {
+    rules.env[e] = true;
+  });
+  // globals
+  rules.globals = {};
+  opts.global.split(',').forEach(g => {
+    rules.globals[g] = 'writable';
+  });
+}
+
 /**
  * 这是一个标准的中间件工程模板
  * @param {object} opts cli 传递过来的参数对象 (在 pipe 中的配置)
@@ -16,21 +29,21 @@ module.exports = function (opts) {
   opts.ext = opts.ext || '.js,.jsx';
   opts.global = opts.global || 'window,$,jQuery';
   opts.ignore = opts.ignore || [];
+  opts.realtime = opts.realtime || false;
 
   const eslint = this.utils.findCommand(__dirname, 'eslint');
   const rulesFile = path.resolve(__dirname, './.eslintrc.yml');
 
-  //外层函数的用于接收「参数对象」
-  //必须返回一个中间件处理函数
+  // 外层函数的用于接收「参数对象」
+  // 必须返回一个中间件处理函数
   return async function (next) {
 
-    this.console.info('执行静态检查...');
+
 
     const isInstalled = (name) => {
       return fs.existsSync(path.normalize(`${this.cwd}/node_modules/${name}`));
     };
-
-    //安装规范包
+    // 安装规范包
     const flag = { 'save-dev': true };
     const deps = [
       'eslint-config-dawn', 'eslint-plugin-react', 'eslint-plugin-react-hooks',
@@ -43,36 +56,66 @@ module.exports = function (opts) {
     const sources = (utils.isArray(opts.source) ? opts.source : [opts.source])
       .filter(dir => globby.sync(`${dir}/**/*.{js,jsx}`).length > 0);
     if (sources.length < 1) return next();
-    this.console.log('检查目标', sources.join(', '));
+    // this.console.log('检查目标', sources.join(', '));
 
     const ignores = utils.isArray(opts.ignore) ? opts.ignore : [opts.ignore];
     const ignoreText = ignores.map(item =>
       (`--ignore-pattern ${item}`)
     ).join(' ');
 
-    //读取内建规则
+    // 读取内建规则
     const rulesText = await this.utils.readFile(rulesFile);
     const rules = yaml.safeLoad(rulesText.toString(), 'utf8');
+
+    modifyRulesConfig(opts, rules);
     this.emit('lint.rules', rules);
-    //向项目写入 yaml 配置
+
+    // 向项目写入 yaml 配置
     const yamlFile = path.normalize(`${this.cwd}/.eslintrc.yml`);
     const yamlText = yaml.safeDump(rules);
     await this.utils.writeFile(yamlFile, yamlText);
-    //向项目写入 json 配置
-    const jsonFile = path.normalize(`${this.cwd}/.eslintrc.json`);
-    const jsonText = JSON.stringify(rules, null, '  ');
-    await this.utils.writeFile(jsonFile, jsonText);
 
-    /* eslint-disable */
-    await this.utils.exec([
-      eslint, '--global', opts.global, ignoreText, '--env', opts.env,
-      '--ext', opts.ext, , sources.join(' '), '--fix'
-    ].join(' '));
-    /* eslint-enable */
-    this.console.info('完成');
+    // 不再向项目写入 json 配置覆盖
+    // const jsonFile = path.normalize(`${this.cwd}/.eslintrc.json`);
+    // const jsonText = JSON.stringify(rules, null, '  ');
+    // await this.utils.writeFile(jsonFile, jsonText);
+
+    // 删除暂时不需要的 .eslintrc.json
+    this.utils.del(path.normalize(`${this.cwd}/.eslintrc.json`));
 
+    if (opts.realtime) {
+      const eslintLoader = {
+        test: /\.(js|jsx)$/,
+        include: path.resolve(this.cwd, 'src'),
+        exclude: /node_modules/,
+        enforce: 'pre',
+        loader: [{
+          loader: require.resolve('eslint-loader'),
+          options: {
+            cache: true,
+            formatter: 'stylish',
+          },
+        }],
+      };
+      this.on('webpack.config', (webpackConf) => {
+        if (Array.isArray(webpackConf.module.loaders)) {
+          webpackConf.module.loaders.unshift(eslintLoader);
+        } else {
+          // eslint-disable-next-line no-param-reassign
+          webpackConf.module.loaders = [eslintLoader];
+        }
+      });
+    } else {
+      this.console.info('执行静态检查...');
+      /* eslint-disable */
+      await this.utils.exec([
+        eslint, '--global', opts.global, ignoreText, '--env', opts.env,
+        '--ext', opts.ext, , sources.join(' '), '--fix'
+      ].join(' '));
+      /* eslint-enable */
+      this.console.info('lint 检查完成');
+    }
     next();
-
   };
 
 };

packages/dn-middleware-lint/package.json

@@ -11,12 +11,13 @@
   "dependencies": {
     "babel-eslint": "^10.0.1",
     "eslint": "^5.3.0",
+    "eslint-config-dawn": "^1.0.9",
+    "eslint-loader": "^3.0.2",
     "eslint-plugin-html": "^5.0.0",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-hooks": "^1.0.1",
     "globby": "^8.0.1",
     "js-yaml": "^3.12.0",
-    "ntils": "^4.0.4",
-    "eslint-config-dawn": "^1.0.9"
+    "ntils": "^4.0.4"
   }
 }

packages/dn-middleware-lint/src/index.jsx

@@ -13,4 +13,8 @@ function test(){
   }
   return <XXX></XXX>;
 }
-test();
+test();
+console.log(1);
+
+const foo = 1;
+const bar = 2;

packages/dn-middleware-lint/src/test.js

@@ -3,4 +3,5 @@ console.log('你好', {
   b: 1,
 });
 const exp = 'dsaf\D\Adsaf';
-console.log(exp);
+console.log(exp);
+const bar = 2;