Question

我只想对修改后的文件运行eslint。我在package.json中创建了一个新的运行目标，以从命令行（eslint）运行git diff --name-only --relative | grep -E '.*\\.(vue|js)$' | xargs eslint --ext .js,.vue。从理论上讲，这应该可以正常工作，但是当使用webpack捆绑文件时，我的项目中发生了一些转换步骤（字符串替换），这会抛出eslint（一些非标准标记将扩展为JS）

我有哪些选择，我将如何实施它们？例如，我可以执行特定的Webpack规则/加载程序并将结果通过管道传递到eslint吗？我看到的另一个选择是将eslint包含在webpack规则/加载器进程中（而不是从命令行执行），但是我将如何过滤当前修改的文件（可以由临时文件处理）包含git diff...结果的文件吗？）

Answer 1

我有一种可行的方法。我选择修改webpack.base.conf.js而不是使用命令行解决方案来利用已经存在的字符串替换加载程序。

文件收集在WebpackBeforeBuildPlugin回调函数中，而不是使用基于正则表达式的测试变量，而是使用一个函数检查先前收集的文件。

const exec = require('child_process').exec;
const WebpackBeforeBuildPlugin = require('before-build-webpack');
var modFilesList = new Set([]);
const srcPath = resolve('.');

...
      rules: [{
        test: function(filename) {
          let relFilename = path.relative(srcPath, filename);
          let lint = modFilesList.has(relFilename);
          return lint
        },
        loader: 'eslint-loader',
        include: resolve('src'),
        exclude: /node_modules/,
        options: {
          formatter: require('eslint-friendly-formatter'),
          cache: false
        }
      }, {
       ... other string replacement loader ...
      }


   plugins: [
    ...
    new WebpackBeforeBuildPlugin(function(stats, callback) {
      // Collect changed files before building.
      let gitCmd = 'git diff --name-only --relative | grep -E ".*\\.(vue|js)$"';
      const proc = exec(gitCmd, (error, stdout, stderr) => {
        if (stdout) {
          let files = stdout.split('\n');
          modFilesList = new Set(files);
        }
        if (error !== null) {
          console.log(`exec error: ${error}`);
        }
      });
      callback();
    })
  ]

目前唯一的问题是，当git文件发生更改时，它们不会基于这些文件更改（即，新文件已更改，或者之前（在启动webpack-dev-server之前）已更改）而触发重新lint文件更改将被丢弃）。我检查了一切。更改被注册并存储在modFilesList中，测试函数将执行并返回true（对于以前未更改的文件中的新更改）或false（如果更改被放弃）。我也没有使用cache选项。似乎在初始加载时，eslint-loader缓存了将来将要处理的文件（不知道这是使用测试功能而不是正则表达式还是正则表达式的结果）。有没有人有想法或曾经见过这个想法（eslint-loader未更新文件列表）？

更新

这似乎是webpack（或其他加载程序之一）存在的问题，因为文件更改后甚至没有执行eslint-loader。但是执行test函数有点奇怪。我不完全了解装载机的工作方式或它们如何共同发挥作用，因此可能还有其他装载机导致了这种情况...

坚持动态更改文件列表

1 个答案: