解决 ESLint 引出的 “'require' is not defined” 问题

问题背景

在使用 ESLint 进行 JavaScript 代码检查的时候，有时会遇到 "‘require’ is not defined" 的错误提示。这个错误是因为在浏览器环境下，require 方法并不是 JavaScript 的标准方法，因此在代码中使用 require 方法会被 ESLint 判定为错误。

解决方法

方案一：使用全局变量

在代码中使用 require 方法时，可以通过在代码开头添加注释的方式告知 ESLint，require 方法是一个全局变量，不是未定义的变量。

/* global require */
const module = require('./module');

方案二：使用 ECMAScript 模块

在 ECMAScript 6 标准中，引入了模块的概念，可以使用 import/export 语法来实现模块化开发。使用 ECMAScript 模块的方式可以避免使用全局变量，同时也能提高代码的可维护性和可读性。

import module from './module';

需要注意的是，使用 ECMAScript 模块时需要在浏览器中开启支持，可以通过使用 webpack、Rollup 等打包工具来进行转换。

方案三：使用 eslint-plugin-node 插件

eslint-plugin-node 是一个 ESLint 插件，可以帮助我们解决 Node.js 相关的 ESLint 错误，包括 require 方法未定义的问题。

安装 eslint-plugin-node 插件：

npm install eslint-plugin-node --save-dev

在 ESLint 配置文件中添加插件：

{
  "plugins": [
    "node"
  ]
}

然后在 rules 中添加需要检查的规则：

{
  "rules": {
    "node/no-unsupported-features/es-syntax": ["error", { "version": ">=14.0.0", "ignores": ["modules"] }]
  }
}

总结

以上三种方案都可以解决 "‘require’ is not defined" 的问题，具体使用哪种方案取决于项目的实际情况。使用全局变量的方式简单易懂，但不够规范；使用 ECMAScript 模块的方式规范且可维护性强，但需要进行额外的转换；使用 eslint-plugin-node 插件可以帮助我们解决 Node.js 相关的 ESLint 错误，但需要安装插件并配置规则。在实际项目中，可以根据实际情况选择最适合的方案。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6614bc9dd10417a2224fc874