在前端开发项目中，我们经常会使用一些第三方库，例如 React、Vue、Angular 等。这些库提供了一些方便的语法和工具，让我们的开发变得更加简单和高效。然而，在我们使用 ES6 的模块化语法时，往往会遇到一些困扰，比如 ESLint 报错 Parsing error: 'import' and 'export' may only appear at the top level。本文将详细介绍这个问题的原因和解决方法。
问题原因
ESLint 是一款在 JavaScript 项目中进行代码质量检查的工具。对于使用了 ES6 模块化语法的项目，如果没有正确配置，就会发现 ESLint 报出类似以下的错误提示：
Parsing error: 'import' and 'export' may only appear at the top level
这个问题的原因在于，ESLint 默认对 ES6 模块化语法会进行代码错误检查，但在环境不支持这些语法的情况下，却不能正确解析这些语法。这意味着，当我们在不支持 ES6 模块化语法的环境中使用这些语法，就会抛出上述错误。具体而言，这个错误多出现在使用 CommonJS、AMD、浏览器的全局作用域等不支持 ES6 模块化语法的环境中。
解决方法
既然是因为环境问题导致的问题，那么解决这个问题的方法也很简单：在项目中加入对 ES6 模块化语法的支持即可。具体步骤如下：
步骤一：安装对 ES6 模块化语法的支持
ES6 模块化语法需要使用一些特殊的工具才能正确解析，例如 Babel、webpack 等。因此，我们需要在项目中添加这些工具的支持。
以 Babel 为例，我们可以使用以下命令来安装它：
npm install --save-dev @babel/core @babel/eslint-parser
这个命令将会安装 Babel 的核心支持库 @babel/core，以及与 ESLint 集成的语法解析器 @babel/eslint-parser。
步骤二：配置 ESLint
安装好了对 ES6 模块化语法的支持后，我们需要修改 ESLint 的配置，以便正确地解析这些语法。
我们可以在项目的根目录下创建一个名为 .eslintrc.json 的文件，并编辑它：
-- -------------------- ---- -------
-
--------- -----------------------
---------------- -
------------- ---------
-------------- ----
--
---------- -----------
---------- ---------------------- -----------------------------
-------- -
-- -----------
-
-这个配置文件指定了我们使用 @babel/eslint-parser 作为解析器，并设置了 sourceType 为 module。这样 ESLint 就能够正确地解析 ES6 模块化语法了。
步骤三：修改代码
最后，我们需要根据新的配置文件修改我们的代码，以符合 ESLint 的新规则。我们需要将所有的 import 和 export 语句放到文件的顶部，以便与其他语言的模块化语法保持一致。例如：
import React from 'react';
function Hello() {
return <h1>Hello World</h1>;
}
export default Hello;总结
工具的选择和配置对于项目的开发效率和质量有着至关重要的作用。在使用 ES6 模块化语法时，我们需要正确地处理 ESLint 报出的错误，以便编写出更加规范、高效的代码。本文介绍了如何解决 ESLint 报错 Parsing error: 'import' and 'export' may only appear at the top level 的问题，希望可以帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1c578f6b2d6eab3cfba73