在前端开发中，我们经常使用 ESLint 来检查代码的规范性和错误。然而，有时候我们会遇到一个常见的问题，即 ESLint 报错：'import' is not defined。这个问题通常发生在使用 ES6 模块化语法的项目中，本文将为你详细介绍如何解决这个问题。
问题原因
在 ES6 中，我们可以使用 import/export 语法来进行模块化开发。这种语法在 Node.js 中已经得到了很好的支持，但是在浏览器端，由于兼容性问题，需要使用工具来进行转换，比如 webpack、Rollup 等。而在使用这些工具时，我们需要配置 ESLint 来支持 ES6 的语法。
解决方法
方法一：安装 ESLint 插件
首先，我们需要安装 ESLint 插件来支持 ES6 的语法。在终端输入以下命令：
--- ------- ------ -------------------- ------------------------- --
其中，eslint 是 ESLint 的核心插件，eslint-plugin-import 是支持 import/export 语法的插件，eslint-config-airbnb-base 是 Airbnb 公司开源的一套 ESLint 规则。
安装完成后，我们需要在项目的根目录下创建一个 .eslintrc.js 文件，并添加以下内容：
-------------- - -
-------- ----------------
-------- -----------
------ -
-------------------- ------
--
--其中，extends 表示继承了哪些规则，plugins 表示使用了哪些插件，rules 表示自定义的规则。
方法二：在 Babel 中添加插件
如果你的项目中使用了 Babel，那么你可以在 Babel 中添加插件来支持 ES6 的语法。在终端输入以下命令：
--- ------- ------------------------------------------ --
安装完成后，在 babel.config.js 文件中添加以下内容：
-------------- - -
-------- -
--------------------- -
------------ --------
------- --
---
--
-------- -
---------------------------------------------
--
--其中，@babel/preset-env 是 Babel 的一个插件，可以根据目标浏览器或运行环境自动转换代码。@babel/plugin-proposal-export-default-from 是用来支持 export default from 这个语法的插件。
方法三：使用 CDN 引入插件
如果你不想安装插件或配置 Babel，那么你可以使用 CDN 引入插件来支持 ES6 的语法。在 HTML 文件中添加以下代码：
------- -------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------
其中，eslint-plugin-import 和 eslint-config-airbnb-base 分别是支持 import/export 语法和 Airbnb 规则的插件。
方法四：关闭 ESLint 规则
如果你不想使用 ESLint 来检查 import/export 语法，那么你可以关闭相关的规则。在 .eslintrc.js 文件中添加以下内容：
-------------- - -
------ -
----------------------- ------
-------------------- ------
------------------------------- ------
--
--其中，import/no-unresolved 表示禁止解析未解决的 import，import/extensions 表示禁止导入没有后缀名的文件，import/prefer-default-export 表示优先使用默认导出。
示例代码
------ - --- - ---- ------------ ------------------ ----
在使用 ESLint 检查时，会报错：'import' is not defined。
使用方法一、二、三中的任意一种方法来解决问题后，再次运行代码，就不会报错了。
如果你选择了方法四，那么你需要修改代码，如下所示：
----- - --- - - --------------------- ------------------ ----
总结
ESLint 报错：'import' is not defined 的问题，是由于 ESLint 不支持 ES6 的模块化语法所导致的。我们可以通过安装插件、在 Babel 中添加插件、使用 CDN 引入插件或关闭相关规则来解决这个问题。在使用 ES6 的模块化语法时，我们应该注意配置相关工具来支持这种语法，以便更好地开发项目。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66409ef2d3423812e4ebbcf7