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