多JavaScript文件共用时ESLint报未定义全局变量的解决方法

你可以通过以下几种方式告知ESLint这些跨文件的全局变量是合法定义的，同时保留no-undef规则的检测能力：

1. 在ESLint配置文件中声明全局变量 #

在项目的.eslintrc.js（或.eslintrc.json、.eslintrc等）配置文件里，通过globals字段明确指定预定义的全局变量，设置为true表示允许赋值，false表示只读：

module.exports = {
  // 其他配置...
  globals: {
    MyGlobal: true,
    AnotherGlobal: false // 不允许被重新赋值
  }
};

这种方式适合全局变量数量不多、且在整个项目中通用的场景。

2. 在单个文件顶部添加注释声明全局变量 #

如果某个全局变量只在特定文件中被使用，可在该文件最顶部添加ESLint专用注释，声明这个全局变量：

/* global MyGlobal, AnotherGlobal */
// 或者指定变量是否可写
/* global MyGlobal: true, AnotherGlobal: false */

这种方式灵活性更高，适合局部使用的全局变量。

3. 使用ESLint的overrides配置针对特定文件组声明全局变量 #

如果部分文件共享同一批全局变量，可以在配置文件中用overrides字段给特定文件单独配置全局变量：

module.exports = {
  // 全局配置...
  overrides: [
    {
      files: ['src/using-global-files/**/*.js'],
      globals: {
        MyGlobal: true
      }
    }
  ]
};

这能让配置更精细化，避免全局配置过于繁杂。

4. 使用import/export模块化重构（推荐） #

如果项目允许，最好把原本的全局变量改成模块化的导出导入，从根源上避免全局变量依赖：

• 在定义变量的文件中导出：

// global-defs.js
export const MyGlobal = 'some value';

• 在使用的文件中导入：

// using-global.js
import { MyGlobal } from './global-defs.js';

这种方式不仅能让ESLint自动识别变量来源，还能提升代码的可维护性和模块化程度。

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