如果你曾经用过 ECMAScript 6 或更高版本的 JavaScript，你一定会接触到 import 和 export 这两个关键字。它们可以让你在你的代码中引入和导出模块，从而帮助你更好地组织你的代码和依赖。但是，如果你不小心地在代码中使用了这两个关键字，并且遇到了类似于 “'import' and 'export' may only appear at the top level" 这样的 ESLint 报错信息，怎么办呢？
问题简述
当我们在代码中使用 import 或 export 时，我们往往会将它们写在函数中，以便在需要时动态地引入或导出模块。但是，当你在这个过程中遇到 ESLint 报错时，你就会发现它并不被允许。具体而言，ESLint 会提示：
'import' and 'export' may only appear at the top level
这意味着 import 和 export 关键字只能出现在代码的顶层。
问题分析
为什么 import 和 export 只能出现在代码的顶层呢？这其实是 ECMAScript 6 的语法规范所决定的。按照规范，import 和 export 实际上是定义在模块级别上的，而不是定义在函数或代码块内部。
因此，如果你试图在函数或代码块中使用 import 或 export，就会违反规范，从而导致 ESLint 报错。同时这也会导致模块系统无法正常地加载和导出模块，因为模块系统只能在代码顶级解析 import 和 export。
解决方案
为了解决这个问题，我们需要将 import 和 export 关键字移到代码的顶层。具体而言，我们可以将它们写在文件的最上方。例如：
import moduleA from "./moduleA";
import moduleB from "./moduleB";
export default function foo() {
// ...
}这里我们把 import 和 export 写在了整个文件的顶层。可以看到，这种写法符合 ECMAScript 6 的语法规范，也避免了 ESLint 报错的问题。
当然，如果你在代码中使用了大量的 import 和 export 关键字，你可以考虑使用 namespace 来组织它们。例如：
import * as modules from "./modules";
export default function foo() {
// ...
}这里我们使用了 * as modules 的语法来引入和导出所有的模块。这种写法可以让我们更好地组织和管理代码。
总结
在使用 ECMAScript 6 或更高版本的 JavaScript 时，我们需要注意 import 和 export 只能出现在代码的顶层。如果你在代码中遇到了 “'import' and 'export' may only appear at the top level" 这样的 ESLint 报错信息，你需要将这两个关键字移到代码的顶层，避免违反语法规范。如果你在代码中使用了大量的模块，你可以考虑使用 namespace 来组织它们，以便更好地管理你的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cbeb7b5ad90b6d04234861