为何ESLint不处理Webpack Loader转换后的代码却扫描源文件？

ESLint的代码检查时机早于Webpack自定义Loader的代码转换过程——ESLint直接读取原始源代码（app.js里的aaa），不知道后续会被你的Loader替换成bbb，因此抛出'aaa' is not defined no-undef错误。

下面是几种可行的解决方式，按推荐程度排序：

1. 声明全局变量让ESLint忽略该错误 #

这是最合理的方案，既保留ESLint的其他检查，又明确告知它aaa是合法的全局标识符。

方式A：在项目ESLint配置中全局声明 #

找到项目根目录的.eslintrc.js（或.eslintrc.json），添加globals字段：

module.exports = {
  // 其他配置...
  globals: {
    aaa: 'readonly' // 声明aaa为只读全局变量
  }
};

方式B：在单个文件顶部添加注释 #

如果只想让当前文件忽略aaa的未定义错误，在app.js开头添加：

/* global aaa */
const bbb = 'content'

function App() {
  return (
    <div className="App">
      <div> {aaa}</div>
    </div>
  );
}

export default App;

2. 调整Webpack中Loader执行顺序（不推荐） #

如果项目通过Webpack的eslint-loader做实时检查，可以调整loader顺序，让自定义Loader先处理代码，再让ESLint检查转换后的结果。但这样ESLint会校验替换后的bbb而非你编写的aaa，不利于代码维护。

修改webpack.config.js中的loader规则：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  use: [
    {
      loader: require.resolve('babel-loader'),
      options: { },
    },
    require.resolve('../myLoader'), // 自定义Loader先执行
    require.resolve('eslint-loader') // ESLint后执行（需确保项目已配置该loader）
  ]
},

3. 临时禁用单个错误（不推荐） #

在出现错误的代码行上方添加注释，仅禁用该行的no-undef规则：

<div> {/* eslint-disable-next-line no-undef */} {aaa}</div>

这种方式只能临时解决单个问题，无法批量处理，且容易遗漏其他真正的未定义变量错误。

内容的提问来源于stack exchange，提问作者hewc