解决使用 ESLint 报错：Require statement not part of import statement

当你在开发前端项目时，使用了 ESLint 工具对代码进行检查，可能会遇到这个报错：Require statement not part of import statement。这个错误主要是因为你在代码中使用了 CommonJS 的 require 语句，而不是 ES6 的 import 语句。本篇文章将为你详细介绍如何解决它，以及为什么要使用 import 语句。

前置知识

在学习本篇文章之前，你需要了解以下知识：

• CommonJS 的 require 语句
• ES6 的 import 语句
• ESLint 工具

问题背景

假设你正在写一个前端项目，其中有一个文件 example.js，需要引入一个名为 lodash 的第三方库，代码如下：

const _ = require('lodash');

function example() {
  // ...
}

module.exports = example;

当你使用 ESLint 工具对这个文件进行检查时，会报错：

error  'require' is not defined.  no-undef
error  'module' is not defined.  no-undef
error  'exports' is not defined.  no-undef
error  Require statement not part of import statement  import/no-dynamic-require

这是因为 ESLint 默认情况下只支持 ES6 的 import 语句，不支持 CommonJS 的 require 语句。所以我们需要告诉 ESLint 该如何处理这个问题。

解决方法

方案一：修改 ESLint 配置文件

ESLint 提供了一个配置文件 .eslintrc.js，我们可以在其中添加一条规则，让 ESLint 支持 CommonJS 的 require 语句。

具体操作如下：

1. 在你的项目根目录中找到 .eslintrc.js 文件，如果没有就新建一个。
2. 在配置文件中添加以下内容：

{
  "rules": {
    "import/no-commonjs": "off"
  }
}

这个配置表示禁用 ESLint 的 import/no-commonjs 规则，该规则默认是开启的，用于检查是否使用了 CommonJS 的 require 语句。

1. 重新运行 ESLint，此时将不再出现上面的报错。

但是，这种方法有一个缺点：它将禁用对 CommonJS 的 require 语句的规则检查，这可能会导致其他问题。

方案二：使用 eslint-plugin-import 插件

ESLint 有一个名为 eslint-plugin-import 的插件，它提供了一系列配置，可以更准确地控制 import 语句的使用。我们可以使用这个插件来处理上述问题。

具体操作如下：

1. 安装插件：

npm install --save-dev eslint-plugin-import

1. 修改 .eslintrc.js 配置文件，添加以下内容：

{
  "plugins": [
    "import"
  ],
  "rules": {
    "import/no-commonjs": "error"
  }
}

这个配置表示启用 eslint-plugin-import 插件，并开启 import/no-commonjs 规则，该规则用于检查是否使用了 CommonJS 的 require 语句。

1. 重新运行 ESLint，此时可以看到上述报错已经消失。

为什么要使用 import 语句

我们已经知道，使用 import 语句可以解决上述问题，但是为什么要使用 import 语句呢？这里有几个原因：

1. 模块化

使用 import 语句，可以将代码按照功能分成多个文件，每个文件就成为了一个模块，便于管理和维护。同时，通过 import 语句，我们可以引入第三方库或其他模块中的变量和函数，让代码更加灵活。

2. 静态分析

ES6 的 import 语句可以进行静态分析，即在编译时就可以确定要引入的模块和变量。这比 CommonJS 的 require 语句要好，因为 require 语句是在运行时才能确定要引入的模块和变量，所以在编译器的优化中很难进行处理。

3. Tree Shaking

Tree Shaking 是一个优化技术，可以剔除未使用的代码，减小 bundle 的体积。Tree Shaking 只能在编译时进行，所以需要使用 ES6 的 import 语句，以便编译器能够进行静态分析。

示例代码

最后，我们来看一下示例代码，里面演示了如何使用 import 语句引入第三方库 lodash。

import _ from 'lodash';

function example() {
  // use _ here
}

export default example;

总结一下：

• 当使用了 CommonJS 的 require 语句时，ESLint 工具会报错。
• 可以通过修改 ESLint 配置文件或使用 eslint-plugin-import 插件来解决报错。
• 使用 ES6 的 import 语句可以让代码更加模块化、易于管理和维护，同时还有静态分析和 Tree Shaking 的好处。

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