使用 ESLint 遇到 require 未定义，这样解决

使用 ESLint 遇到 require 未定义，这样解决

在前端开发中，我们经常使用 ESLint 检查代码规范。不过在使用过程中，你可能会遇到 require 未定义的问题。这篇文章将向你介绍两种解决方案，既有深度又有实际应用意义。

问题表现

先来看一下问题的表现。当使用 require 时，编辑器会在该行代码上提示 require is not defined 的错误，然后 ESLint 也会给出相应的提示信息。

这是因为 require 属于 CommonJS 规范，而 ESLint 默认只检查 ECMAScript 规范，因此需要我们手动添加插件或者规则来解决。

解决方案一：使用 eslint-plugin-node 插件

eslint-plugin-node 是一个 ESLint 插件，可以用来检测 Node.js 代码中的各种规范问题。安装该插件后，在 .eslintrc 文件中加入以下内容：

// javascriptcn.com 代码示例
{
  "plugins": [
    "node"
  ],
  "rules": {
    "node/no-unsupported-features/es-syntax": [
      "error",
      {
        "ignores": ["modules"]
      }
    ]
  }
}

这里的规则 node/no-unsupported-features 用于检查不支持的 Node.js 特性，其中，ignores 属性用来忽略指定的特性。把 modules 添加到 ignores 中表示忽略对 CommonJS 模块的检查。

然后就可以重新执行 ESLint，这时就不再提示 require is not defined 的错误了。

解决方案二：使用 babel-eslint 解析器

babel-eslint 是一个用于解析 ES6 代码的 ESLint 解析器。ESLint 默认使用 Esprima 解析器，但是它只支持 ECMAScript5 和一些 ES6 特性，不支持 CommonJS 规范。而 babel-eslint 可以让 ESLint 支持使用 ES6 和 CommonJS 规范的代码。

安装 babel-eslint 后，在 .eslintrc 文件中添加以下内容：

"parser": "babel-eslint",
"parserOptions": {
  "sourceType": "module"
},

这里的 parser 属性用于指定使用 babel-eslint 解析器，parserOptions.sourceType 属性则用于告诉 ESLint 使用 ES6 模块语法。

然后执行 ESLint，就可以看到 require 未定义的错误已经被解决了。

总结

本文介绍了两种解决 require 未定义的问题的方法：使用 eslint-plugin-node 插件和使用 babel-eslint 解析器。前者可以忽略 CommonJS 规范，在使用 ES6 语法的同时，也可以继续使用 require/exports 这样的语法；后者则是在 Esprima 解析器的基础上支持 CommonJS 规范和 ES6 模块语法。

在实际使用中，可以根据项目的具体情况选择适合自己的解决方案。无论使用哪种方法，都可以让我们更好的规范化代码，并提高代码质量。

示例代码：

// javascriptcn.com 代码示例
const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6533553f7d4982a6eb6da1b9