在前端开发中，我们常常使用 ESLint 来检查我们的代码是否符合规范，从而提高代码质量和可维护性。然而，当我们使用 ES6 的模块化语法时，可能会遇到一个常见的报错：“'import' is not defined”。
问题分析
这个报错的原因是因为 ESLint 默认不支持 ES6 的模块化语法，而 import 是 ES6 中导入模块的关键字，因此会被识别为未定义的变量。
解决方案
要解决这个问题，我们需要在 ESLint 中添加对 ES6 模块化语法的支持。具体来说，我们可以通过以下两种方式来解决：
方案一：使用 eslint-plugin-import 插件
eslint-plugin-import 是一个专门为解决 import/export 问题而开发的插件，它可以让 ESLint 支持 ES6 模块化语法。
首先，我们需要安装 eslint-plugin-import 插件：
npm install --save-dev eslint-plugin-import
然后，在 .eslintrc.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
--------
--
------ -
-- ---
----------------------- --------
--------------- --------
----------------- --------
------------------- -------
-
-配置中的 import/no-unresolved 规则用于检查导入的模块是否存在，import/named 规则用于检查命名导入是否存在，import/default 规则用于检查默认导入是否存在，import/namespace 规则用于检查命名空间导入是否存在。这些规则可以根据需要进行调整。
方案二：使用 babel-eslint 解析器
如果我们已经在项目中使用了 Babel 来编译 ES6 代码，那么我们可以使用 babel-eslint 解析器来解决这个问题。
首先，我们需要安装 babel-eslint 解析器：
npm install --save-dev babel-eslint
然后，在 .eslintrc.js 文件中添加以下配置：
module.exports = {
// ...
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
}
}配置中的 parser 选项用于指定解析器为 babel-eslint，parserOptions 中的 sourceType 选项用于指定代码是 ES6 模块化语法。
示例代码
下面是一个示例代码，演示了如何使用 ES6 的模块化语法：
// 模块 a.js
export const a = 1;
// 模块 b.js
import {a} from './a.js';
console.log(a); // 输出 1使用以上两种方案中的任意一种，都可以让 ESLint 正确地解析这段代码，从而避免了 'import' is not defined 报错。
总结
ESLint 报错：'import' is not defined 是一个常见的问题，但是通过使用 eslint-plugin-import 插件或 babel-eslint 解析器，我们可以很容易地解决这个问题。同时，这个问题也提醒我们，要善于使用工具来提高代码质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bc8525add4f0e0ff524093