为了在现代浏览器上使用 JavaScript，我们通常会使用最新的 ECMAScript 标准，例如 ECMAScript 6 (ES6)。然而，对于一些旧的浏览器（例如 IE 11），它们并不支持新的标准，因此我们需要将 ES6 转换为 ES5。
Babel 是一个流行的 JavaScript 编译器，它可以将 ES6 代码转换为 ES5 代码。在这篇文章中，我们将介绍如何使用 Babel 在前端开发中将 ES6 转换为 ES5。
安装 Babel
首先，我们需要安装 Babel。我们可以使用 npm 在命令行中安装 Babel：
npm install babel-core babel-preset-env --save-dev
这将安装 Babel Core 和 Babel Preset Env。Babel Core 是 Babel 的主要依赖项，它将用于转换 ES6 代码。Babel Preset Env 是一个智能预设，它将根据当前的环境自动确定需要转换的功能。
配置 Babel
安装完 Babel 后，我们需要配置 Babel。我们可以在项目的根目录下创建一个 .babelrc 文件来配置 Babel。
在 .babelrc 文件中，我们可以指定需要转换的功能。例如，如果我们只想转换箭头函数、模板字符串、类等 ES6 功能，我们可以将其配置如下：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- --- -- ----
--
-------------- ----
--
-
-在这个配置中，我们使用了 Babel Preset Env，并将目标浏览器设置为最近的两个版本和 IE 11。我们还启用了 useBuiltIns 选项，这将根据目标浏览器自动包含必要的 polyfill。
使用 Babel 转换代码
现在我们已经安装并配置了 Babel，现在可以将 ES6 代码转换为 ES5 代码。我们可以使用 Babel CLI，在命令行中运行以下命令：
babel src -d dest
这将使用 Babel 将 src 目录中的所有 JavaScript 文件转换为 ES5 代码，并将转换后的文件保存到 dest 目录中。
示例代码
现在，我们来举一个例子，演示如何使用 Babel 将 ES6 代码转换为 ES5 代码。
在这个例子中，我们将使用 ES6 的箭头函数，并将其转换为 ES5 的普通函数。我们将创建两个文件，app.js 和 math.js。
app.js
import { add } from "./math.js";
const sum = (a, b) => {
return add(a, b);
};
console.log(sum(1, 2));math.js
export const add = (a, b) => {
return a + b;
};使用 Babel 转换代码后，app.js 将变为：
-- -------------------- ---- ------- ---- -------- --- ----- - --------------------- --- --- - -------- ------ -- - ------ --- ------------- --- -- ------------------ ----
注意，在转换后的代码中，箭头函数变成了普通函数，并且导入语句和导出语句也发生了改变。
结论
在现代前端开发中，我们通常使用新的 ECMAScript 标准来编写代码。然而，在一些旧的浏览器中，它们并不支持新的标准，因此我们需要将 ES6 转换为 ES5。Babel 是一个流行的 JavaScript 编译器，它可以将 ES6 代码转换为 ES5 代码。在本文中，我们介绍了如何使用 Babel 将 ES6 转换为 ES5，包括安装 Babel、配置 Babel 和使用 Babel 转换代码的完整步骤。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67498cb4a1ce00635465faf7