vim的ale调用eslint引起webpack与jest多次重新编译问题

在前端项目中,有大量的import,webpack的resolve.alias为此提供了很大的方便。为项目的一些常用路径定义别名,可以极大的简化代码并提高代码可读性。

eslint有一个plugin– eslint-plugin-import,能检测import的package是否合规,为了与webpack的alias一起工作,于是又有了一个新工具— eslint-import-resolver-webpack,使eslint可以识别webpack中定义的别名引用路径。

https://www.npmjs.com/package/eslint-import-resolver-webpack

我最初使用的是文档中省事的写法,直接在.eslintrc.js中使用了webpack的文件名

config: webpack.config.js

vim通过ale插件,支持eslint语法检查,是随输入随检查。

从此开始了编译的噩梦。

只要vim修改了文件内容,文件还没保存,但jest –watch 或 webpack-dev-server进程就会认为文件有改动,疯狂的重新编译,或重新运行测试。

一开始没意识到问题,还以为正常就这样,后来发现用其他编辑器在文件还没有保存的时候,修改文件内容是不会出发文件监听更新事件的。

首先定位错误到vim,经过挨个插件排查发现问题出在ale上,只要每次ale调用eslint,就会触发文件更新。实际用ls -l –full-time检查了一下发现eslint并没有更新文件的任何属性。

于是定位到eslint,对比了一下tslint,发现tslint不会触发文件更新事件。以为是eslint的bug或默认行为?于是开始排除eslint的插件,发现只要加载了webpack的配置,就会触发文件更新。终于定位到错误。

最后,将webpack中的alias部分提取到独立的文件,分别由.eslintrc.js与webpack.config引入使用,解决该问题。

关于 admin

所有重要的进步,都来源于失败和挫折的经历
此条目发表在 ecmascript, vim 分类目录。将固定链接加入收藏夹。