ES6 是当前前端开发中的标准语言，其引入了新的语法和特性，包括但不限于 module。module 的引入能够提高前端项目的可维护性和可读性，但对某些开发者而言，可能会遇到一些问题，例如在 import/export 使用时，会出现解析器编译时出现的错误。本文将会详细讲解这些问题，并给出相应解决方案，帮助读者更好地理解和使用 ES6 module。
问题描述
当我们在 ES6 中使用 import/export 时，如果出现以下错误，那么该怎么办？
SyntaxError: Cannot use import statement outside a module
这个错误提示明确地告诉我们，此处不能使用 import 语句。可能会让初学者感到困惑。这个问题是由于我们的代码被解析器认为不是模块文件导致的。
解决方案
在解决这个问题之前，我们需要先了解 ES6 模块的背景和如何为项目创建模块。
ES6 模块的背景
在 ES6 之前，JavaScript 缺乏标准的模块系统，导致了项目中缺乏可重用的代码和命名空间的问题。为了解决这个问题，ES6 引入了模块的概念，ES6 模块可以作为独立的文件单独存在，而不需要像在早期需要将所有 JavaScript 代码放在同一个大文件里。
ES6 中的模块使用 import/export 语句来导入/导出其他模块的代码。import 语句用于导入一段 ECMAScript 模块中的指定内容，而 export 的主要作用是显式导出一个函数、对象或原始类型值等。
为项目创建模块
首先，你需要创建一个包含至少一个 .js 文件的文件夹，这个文件夹将充当我们的模块。接下来，在每个需要导入/导出的文件中使用如下语法：
export const valueName = 'value';
或者：
const valueName = 'value';
export { valueName };这表示将指定的变量或函数作为模块的一个公共接口，从而使其可以被其他模块导入和使用。
下面是一个使用 export 和 import 的示例：
-- -------------------- ---- ------- -- -------- ------ -------- ------ -- - ------ - - -- - ------ -------- ----------- -- - ------ - - -- - -- ------- ------ - ---- -------- - ---- ------------- ------------------ ---- -- - ----------------------- ---- -- -
此时，你可以直接在浏览器环境下运行 index.html 文件并查看控制台输出结果。不过，一般来说，我们的开发环境不支持 ES6 模块，需要使用某些工具来将其转换为常规的 JavaScript。
非常规 JavaScript 转换
如果我们在非 Node.js 环境下运行代码时会出现类似于：
SyntaxError: Cannot use import statement outside a module
的错误时，我们需要将代码从 ES6 模块转换为普通的 JavaScript 文件。你可以使用一些第三方工具来转换代码，例如 Babel。Babel 是一个广泛使用的 JavaScript 转换工具，它支持将 ES6 代码转换为非常规 JavaScript，例如 CommonJS 或 AMD。
对于 Babel，我们需要安装以下两个模块：@babel/core 和 @babel/cli：
npm install --save-dev @babel/core @babel/cli
接着，在 package.json 中添加以下脚本：
"scripts": {
"build": "babel src --out-dir lib"
}这表示将 src 文件夹下的所有文件都转换为普通的 JavaScript，并输出到 lib 文件夹下。
此时，你可以执行以下命令来转换代码：
npm run build
此时，你会发现 src 文件夹下的所有文件都已经转换为普通的 JavaScript 并输出到 lib 文件夹下。之后，你可以使用这些生成的文件来在浏览器环境下运行你的项目。
总结
在本文中，我们了解了 ES6 模块的背景和如何为项目创建模块，同时探讨了使用 import/export 时可能出现的问题，以及如何使用第三方工具将 ES6 模块转换为普通的 JavaScript 代码。对于每一个想要更好地使用 ES6 模块的前端开发者来说，本文都有一定的指导作用。希望本文能够帮助读者更好地理解和使用 ES6 模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a62d8f48841e98942bfa70