在现代的前端开发中，ES6 已经成为了主流的编程语言。而其中的 import/export 语法，更是让我们能够更好地组织我们的代码。但是，由于不同浏览器对于 ES6 的支持程度不同，我们需要使用 Babel 来将 ES6 的代码编译成 ES5 的代码，以便在不同的浏览器中运行。
本文将介绍如何使用 Babel 编译 ES6 import/export 语法，让你的代码更加兼容性和灵活性。
Babel 简介
Babel 是一个 JavaScript 编译器，它可以将最新版本的 JavaScript 代码转换成向后兼容的代码，以便在更旧的浏览器或环境中使用。Babel 通过插件来实现不同的功能，比如编译 ES6、ES7、TypeScript 等代码。
开始使用 Babel
安装 Babel
首先，我们需要安装 Babel。在命令行中输入以下命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
这里我们安装了三个包：
@babel/core：Babel 的核心包，提供了编译器的基础功能。@babel/cli：Babel 的命令行工具，可以在命令行中使用 Babel。@babel/preset-env：Babel 的预设，提供了编译 ES6、ES7 等代码的能力。
配置 Babel
安装完 Babel 后，我们需要配置 Babel。在项目根目录下创建一个 .babelrc 文件，输入以下内容：
{
"presets": [
"@babel/preset-env"
]
}这里我们使用了 @babel/preset-env 预设，它会根据你在 package.json 文件中指定的 browserslist 来自动判断需要转换的代码。如果你没有指定 browserslist，它会默认转换所有的 ES6 代码。
编译代码
配置好 Babel 后，我们就可以开始编译代码了。在命令行中输入以下命令：
npx babel src -d lib
这里我们将 src 目录下的代码编译到 lib 目录下。Babel 会自动识别 src 目录下的所有文件，并将它们编译到 lib 目录下。
使用编译后的代码
编译代码后，我们就可以在浏览器中使用编译后的代码了。在 HTML 文件中引用编译后的代码：
<script src="lib/index.js"></script>
示例代码
下面是一个使用 import/export 语法的示例代码：
-- -------------------- ---- ------- -- ------------ ------ - --- - ---- ------------ ------------------ ---- -- ----------- ------ -------- ------ -- - ------ - - -- -
编译后的代码：
-- -------------------- ---- ------- -- ------------ ---- -------- --- ----- - --------------------- --------------- ------------- ---- -- ----------- ---- -------- ------------------------------ ------------- - ------ ---- --- -------- ------ -- - ------ - - -- - ----------- - ----
总结
在本文中，我们介绍了如何使用 Babel 编译 ES6 import/export 语法。通过使用 Babel，我们可以将最新版本的 JavaScript 代码转换成向后兼容的代码，以便在更旧的浏览器或环境中使用。希望本文能够帮助你更好地理解和使用 Babel。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66889b92dc1ed1a61bad821e