当你在开发前端项目时，使用了 ESLint 工具对代码进行检查，可能会遇到这个报错：Require statement not part of import statement。这个错误主要是因为你在代码中使用了 CommonJS 的 require 语句，而不是 ES6 的 import 语句。本篇文章将为你详细介绍如何解决它，以及为什么要使用 import 语句。
前置知识
在学习本篇文章之前，你需要了解以下知识：
- CommonJS 的 require 语句
- ES6 的 import 语句
- ESLint 工具
问题背景
假设你正在写一个前端项目，其中有一个文件 example.js，需要引入一个名为 lodash 的第三方库，代码如下：
----- - - ------------------ -------- --------- - -- --- - -------------- - --------
当你使用 ESLint 工具对这个文件进行检查时，会报错：
----- --------- -- --- -------- -------- ----- -------- -- --- -------- -------- ----- --------- -- --- -------- -------- ----- ------- --------- --- ---- -- ------ --------- -------------------------
这是因为 ESLint 默认情况下只支持 ES6 的 import 语句，不支持 CommonJS 的 require 语句。所以我们需要告诉 ESLint 该如何处理这个问题。
解决方法
方案一：修改 ESLint 配置文件
ESLint 提供了一个配置文件 .eslintrc.js，我们可以在其中添加一条规则，让 ESLint 支持 CommonJS 的 require 语句。
具体操作如下：
- 在你的项目根目录中找到
.eslintrc.js文件，如果没有就新建一个。 - 在配置文件中添加以下内容：
-
-------- -
--------------------- -----
-
-这个配置表示禁用 ESLint 的 import/no-commonjs 规则，该规则默认是开启的，用于检查是否使用了 CommonJS 的 require 语句。
- 重新运行 ESLint，此时将不再出现上面的报错。
但是，这种方法有一个缺点：它将禁用对 CommonJS 的 require 语句的规则检查，这可能会导致其他问题。
方案二：使用 eslint-plugin-import 插件
ESLint 有一个名为 eslint-plugin-import 的插件，它提供了一系列配置，可以更准确地控制 import 语句的使用。我们可以使用这个插件来处理上述问题。
具体操作如下：
- 安装插件：
--- ------- ---------- --------------------
- 修改
.eslintrc.js配置文件，添加以下内容：
-
---------- -
--------
--
-------- -
--------------------- -------
-
-这个配置表示启用 eslint-plugin-import 插件，并开启 import/no-commonjs 规则，该规则用于检查是否使用了 CommonJS 的 require 语句。
- 重新运行 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。
------ - ---- --------- -------- --------- - -- --- - ---- - ------ ------- --------
总结一下：
- 当使用了 CommonJS 的 require 语句时，ESLint 工具会报错。
- 可以通过修改 ESLint 配置文件或使用 eslint-plugin-import 插件来解决报错。
- 使用 ES6 的 import 语句可以让代码更加模块化、易于管理和维护，同时还有静态分析和 Tree Shaking 的好处。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65035f8795b1f8cacd04cd17