前言
随着前端技术的不断发展，越来越多的新特性和语言被引入到了前端开发中，其中最受欢迎的莫过于 ES6 和 ES7。然而，由于一些浏览器还不支持这些新特性，我们需要使用 Babel6 来将这些代码编译成浏览器可以理解的 ES5 代码。本文将详细介绍如何使用 Babel6 来编译 ES6、ES7 代码，并包含示例代码。
安装
首先，我们需要安装 Babel6。可以使用 npm 来安装：
npm install babel-cli babel-preset-env --save-dev
同时，我们需要在项目根目录下创建一个名为 .babelrc 的文件，并在其中添加以下内容：
{
"presets": ["env"]
}这里我们使用了 babel-preset-env 这个预设，它可以自动根据目标浏览器和 Node.js 版本来确定需要编译哪些特性。
编译 ES6 代码
假设我们有一个 ES6 的模块文件 src/index.js，内容如下：
const message = 'Hello, world!' export default message
我们想要将它编译成 ES5 的代码，可以使用以下命令：
babel src --out-dir lib
这个命令会将 src 目录下的所有文件编译成 ES5 的代码，并将编译后的代码输出到 lib 目录下。
编译后的代码如下所示：
'use strict'; var message = 'Hello, world!'; exports.default = message;
可以看到，const 被转换成了 var，export default 被转换成了 exports.default。
编译 ES7 代码
Babel6 也支持编译 ES7 的代码。假设我们有一个 ES7 的模块文件 src/index.js，内容如下：
async function getMessage() {
const response = await fetch('/api/message')
const message = await response.json()
return message
}
export default getMessage我们想要将它编译成 ES5 的代码，可以使用以下命令：
babel src --out-dir lib
这个命令会将 src 目录下的所有文件编译成 ES5 的代码，并将编译后的代码输出到 lib 目录下。
编译后的代码如下所示：
-- -------------------- ---- -------
---- --------
------------------------------ ------------- -
------ ----
---
--------------- - -----------
-------- ------------ -
------ --------------------------------- --------------------- -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ ------------------------------------------------
---- --
------------- - --
------ -----------------------------------------------
---- --
------ ------------------------- ---------------
---- --
---- ------
------ ----------------
-
-
-- ----- ------
-可以看到，async/await 被转换成了 regeneratorRuntime.async/awrap。
总结
通过本文的介绍，我们学习了如何使用 Babel6 来编译 ES6、ES7 代码，并了解了一些编译后的代码的变化。在实际开发中，我们可以根据需要选择需要编译的特性，以便在不同的浏览器和 Node.js 版本中获得更好的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657bccb6d2f5e1655d678756