随着 JavaScript 语言的不断发展，模块化已经成为了现代前端开发中不可或缺的一部分。而 ES modules 作为 ECMAScript 6 中的标准模块化规范，也越来越受到前端开发者的青睐。
然而，由于目前大多数浏览器尚未完全支持 ES modules，因此在实际开发中，我们往往需要使用 Babel 这样的工具将 ES modules 转换为 CommonJS 或 AMD 等其他模块化规范，以便在浏览器中正确加载和运行我们的代码。
本文将介绍如何在 Babel 7 中使用 ES modules 进行模块转换，帮助你更好地理解和应用 ES modules，提高前端开发效率。
1. 安装 Babel 7
首先，我们需要安装 Babel 7。可以通过 npm 命令进行安装：
npm install @babel/core @babel/cli --save-dev
2. 安装相关插件
接下来，我们需要安装两个 Babel 插件：@babel/preset-env 和 @babel/plugin-transform-modules-es2015。
@babel/preset-env 插件可以根据目标浏览器的版本自动确定需要转换的语法特性，从而让我们更轻松地实现跨浏览器兼容性。
@babel/plugin-transform-modules-es2015 插件则可以将 ES modules 转换为其他模块化规范，如 CommonJS 或 AMD。
可以通过以下命令进行安装：
npm install @babel/preset-env @babel/plugin-transform-modules-es2015 --save-dev
3. 配置 Babel
接下来，我们需要在项目根目录下创建一个 .babelrc 文件，并在其中配置 Babel。代码如下：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- ------ - ---------- ------- -- ---
-
-
-
--
---------- -
------------------------------------------ -
-------- ----
--
-
-其中，"targets" 字段指定了目标浏览器的版本，这里我们设置为最近两个版本的浏览器和 Safari 7 及以上版本的浏览器。
"plugins" 字段则指定了需要使用的 Babel 插件，这里我们使用了 @babel/plugin-transform-modules-es2015 插件，并将 loose 字段设置为 true，以便让 Babel 生成更简洁的代码。
4. 编写示例代码
现在，我们可以编写一些示例代码，来测试 Babel 是否正确地将 ES modules 转换为 CommonJS 或 AMD 等其他模块化规范。
我们可以在 src 目录下创建一个 main.js 文件，其中包含以下代码：
import { sum } from './math.js';
console.log(sum(1, 2));同时，我们还需要在 src 目录下创建一个 math.js 文件，其中包含以下代码：
export function sum(a, b) {
return a + b;
}这里我们使用了 ES modules 的语法，将 sum 函数导出，并在 main.js 中使用 import 语句将其导入。
5. 运行 Babel 转换
最后，我们可以使用以下命令，运行 Babel 将 ES modules 转换为 CommonJS 或 AMD 等其他模块化规范：
npx babel src --out-dir lib
其中，src 是源代码所在的目录，lib 是转换后的代码所在的目录。
运行完毕后，我们可以在 lib 目录下找到转换后的代码，其中 main.js 文件的代码如下所示：
var _math = require("./math.js");
console.log((0, _math.sum)(1, 2));可以看到，Babel 已经将 import 语句转换为了 require 语句，并将 sum 函数的调用方式也做了相应的转换。
总结
本文介绍了如何在 Babel 7 中使用 ES modules 进行模块转换，帮助你更好地理解和应用 ES modules，提高前端开发效率。在实际开发中，我们可以根据项目需要选择不同的模块化规范，并使用 Babel 工具将 ES modules 转换为对应的规范，以实现跨浏览器兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6514a2b495b1f8cacdd078a3