ES6 模块语法是 ECMAScript 的新特性之一，它可以提高代码的可维护性和可读性，使得开发者可以更加方便地组织代码。但是目前浏览器对 ES6 模块语法的支持并不完整，为了兼容旧版浏览器，我们需要使用 Babel 将 ES6 代码编译成 ES5 代码。
Babel 是什么
Babel 是一个 JavaScript 编译器，目的是将新版的 JavaScript 代码转换成向后兼容的 JavaScript 代码，从而能够在旧版浏览器中运行。Babel 可以编译诸如 ES6、ES7 和 JSX 等语言的代码，通过特定的 preset 和 plugin 可以支持更多的语言特性。
安装 Babel
如果没有安装 Node.js，需要先安装 Node.js。安装完成后，通过 npm 安装 Babel：
--- ------- ---------- --------- ----------------
其中，babel-cli 是 Babel 的命令行工具，babel-preset-env 是 Babel 的编译预设，它可以根据配置自动编译所有支持的语言特性。
配置 Babel
创建一个 .babelrc 文件，用于配置 Babel 的编译规则：
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ---
-
--
-
-其中，"targets" 用于指定需要支持的浏览器版本。这里我们指定需要支持最近两个版本和 Safari 7 及以上版本的浏览器。这样，Babel 就会自动识别需要编译的语言特性，并将其编译成 ES5 代码。
使用 Babel
在项目根目录下创建一个 src 目录，并在其下创建一个 index.js 文件，作为示例代码：
-- -------- ------ - --- - ---- --------- ------------------ ----
在 src 目录下创建一个 util.js 文件，用于定义一个 sum 函数：
-- ------- ------ -------- ------ -- - ------ - - -- -
这是一个使用了 ES6 模块语法的示例代码，通过 import 和 export 关键字进行模块导入和导出。如果直接在浏览器中运行这段代码，会出现语法错误。因此我们需要使用 Babel 进行编译。
在 package.json 文件中添加一个 build 命令：
-
---------- -
-------- ------ --- -- -----
-
-其中，babel src -d dist 表示将 src 目录下的所有文件编译到 dist 目录下。
在命令行中执行 npm run build 命令，Babel 将 src 目录下的代码编译成 ES5 代码，并输出到 dist 目录中。
总结
ES6 模块语法是一个非常方便的特性，可以提高代码的可维护性和可读性。但是由于旧版浏览器的兼容性问题，我们需要使用 Babel 将 ES6 代码编译成 ES5 代码。本文介绍了 Babel 的安装、配置和使用方法，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e18eabf6b2d6eab3cbb476