我想仅在修改过的文件上运行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...
结果?)
我有一个有点工作的方法。我选择修改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之前)更改的文件更改是丢弃)。我检查了一切。更改已注册并存储在modFilesList
中,执行测试功能并返回true(对于先前未更改的文件中的新更改)或false,以防更改被丢弃。我也玩cache
选项无济于事。似乎在初始加载时,eslint-loader
会缓存它将来会丢失的文件(不知道这是使用测试函数而不是正则表达式的结果还是正则表达式的情况)。有没有人有想法或之前已经看过这个(eslint-loader没有更新文件列表)?
更新
这似乎是webpack(或其他一个加载器之一)的问题,因为当文件改变时,甚至不执行eslint-loader。然而,执行test
函数有点奇怪。我不完全了解加载器如何工作或它们如何一起工作,因此可能会有一些其他加载器导致这个......