ESLint 报告 'export' is not defined

什么是 ESLint？

ESLint 是一个开源的 JavaScript 语法检测工具，它可以通过采用插件的方式扩展，支持检测常见的 JavaScript 语法错误以及常见的代码风格问题。在前端开发中，ESLint 是一个必要的工具，可以有效提高代码的质量和稳定性。

什么是 'export'?

在 JavaScript 中，export 关键字用于将一个函数、变量、类等从当前模块导出，以供其他模块使用。例如，在一个名为 module.js 的文件中：

export function myFunction() {
  console.log('My function');
}

在另一个文件中，可以通过 import 关键字引入该函数。

import { myFunction } from 'module.js';
myFunction(); // 输出 'My function'

'export' is not defined

当您在使用 export 关键字导出模块时，有时可能会遇到 'export' is not defined 的错误。这种情况通常发生在您使用一些旧版的浏览器或运行环境或者您还未引入 babel-plugin-transform-modules-commonjs 等转译插件，转译导致报错。

如果您在使用 ESLint 进行代码检测时遇到此错误，可能是因为在您的代码中没有引入 eslint-plugin-import 插件，该插件可以检测和解决关于 import 和 export 问题，确保您的代码可以在各种环境下正确运行。

如何解决 'export' is not defined？

要解决 ESLint 的 'export' is not defined 错误，您需要引入 eslint-plugin-import 插件，该插件可以通过检测 import 和 export 语句，解决您的代码中可能存在的问题。

1. 安装 eslint-plugin-import 插件

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

1. 配置 ESLint

在您的 .eslintrc 文件中，添加 eslint-plugin-import 到插件列表中。

{
  "plugins": [
    "eslint-plugin-import"
  ]
}

1. 配置 rules

您可以在您的 .eslintrc 文件中添加以下配置，以确保 ESLint 正确检测 import 和 export 语句。

{
  "rules": {
    "import/no-unresolved": "error",
    "import/named": "error",
    "import/default": "error",
    "import/namespace": "error"
  }
}

示例代码

以下是一个使用了 export 关键字导出模块的示例代码：

// module.js

export const message = 'Hello World';

export function printMessage() {
  console.log(message);
}

使用 import 引入该模块：

// index.js

import { printMessage } from './module.js';

printMessage();

使用 ESLint 检测该代码：

eslint index.js

如果您未引入 eslint-plugin-import 插件，ESLint 将会报错：

5:8 error "'export' is not defined"  no-undef
6:8 error "'export' is not defined"  no-undef

通过引入 eslint-plugin-import 并配置相关 rules 后，ESLint 将不再报错。

总结

在前端开发中，ESLint 是一个必不可少的工具。当在代码开发过程中遇到 ESLint 报告 'export' is not defined 的错误时，可以通过引入 eslint-plugin-import 插件并配置相关 rules 解决。同时，ESLint 不仅仅是一个代码检测工具，它也可以帮助开发者遵循一些最新的规范和最佳实践，提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b0f13cadd4f0e0ffa47721