随着 JavaScript 的不断发展，ES6（ECMAScript 2015）使用越来越广泛。然而，由于一些浏览器不支持 ES6 的一些新特性，我们需要将 ES6 代码转换为 ES5 代码。本文将介绍如何使用 Babel 将 ES6 代码转换为 ES5 代码，并提供一些示例代码。
Babel
Babel 是一个 JavaScript 编译器，可以将最新版本的 JavaScript（ES6+）代码转换为向后兼容的版本，比如 ES5 或者更早的版本。Babel 有一个称为“插件”的系统，可以针对不同的语言特性提供不同的转换规则。这意味着，我们只需选择需要的插件即可实现特定的转换。
安装和配置 Babel
Babel 可以通过 npm 安装，命令如下：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
其中，@babel/core 是 Babel 的核心库，@babel/cli 是 Babel 的命令行工具，@babel/preset-env 是 Babel 的预设，可以根据运行环境来自动加载需要的插件。
配置 Babel 非常简单，只需要在项目根目录下创建 .babelrc 文件，并添加以下内容：
{
"presets": ["@babel/preset-env"]
}这个配置文件告诉 Babel 使用预设 @babel/preset-env，这样 Babel 就可以根据当前运行环境来加载需要的插件。
使用 Babel 转换 ES6 代码为 ES5 代码
有了上面的配置，我们可以使用 Babel 命令行工具来将 ES6 代码转换为 ES5 代码。命令如下：
npx babel src --out-dir lib
其中，src 是存放源代码的目录，lib 是存放转换后代码的目录。
示例代码
下面是一个简单的示例代码，将使用箭头函数（ES6）来计算两个数的和，然后通过 Babel 将其转换为 ES5 代码：
-- -------------------- ---- ------- -- --- ----- --- - --- -- -- - - -- ------------------ ---- -- --- ---- -------- --- --- - -------- ------ -- - ------ - - -- -- ------------------ ----
我们可以看到，Babel 将箭头函数转换为了普通的函数表达式。这样就可以在不支持箭头函数的浏览器上运行这段代码。
总结
使用 Babel 将 ES6 代码转换为 ES5 代码非常容易，只需简单的配置和命令即可。通过使用 Babel，我们可以使用最新的 JavaScript 特性，并确保在不支持这些特性的浏览器上也能运行我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c41de968c7c53b0e8cb24