如何使用 Babel 将 ES6 + 语法转化为 ES3？
随着 JavaScript 的不断发展, ECMAScript 组织的最新标准对于大规模开发是非常有益的。比如2015年发布的 ECMAScript 6(以下简称 ES6) 引入了很多新的语言特性，如箭头函数、模板字面量、let/const、class、promise 等。这些新特性为开发者提供了更好的编程体验和更高的编码效率, 但是，由于新特性并非所有浏览器都支持，因此在开发过程中，为了保证代码的兼容性，我们需要使用 Babel 将 ES6+ 的代码转化为 ES3。
ES3 是 JavaScript 的第三个版本标准，这个版本的标准被所有的现代浏览器所支持。现在，让我们探讨一下如何使用 Babel 将 ES6+ 转化为 ES3 。
第一步是安装 Babel。我们可以使用 npm 来安装 Babel。
npm install @babel/core @babel/cli @babel/preset-env --save-dev
上述命令安装了 Babel 的三个包：@babel/core、@babel/cli 和@babel/preset-env。@babel/core 是 Babel 的核心包，@babel/cli 是 Babel 提供的命令行工具。@babel/preset-env 是 Babel 的预设包，用来告诉 Babel 处理那些特性。
在安装完成 Babel 后，我们需要配置 Babel，告诉它我们需要将哪些特性转换成 ES3。
创建 .babelrc 文件，并在其中配置预设和插件。
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- --- ---- ----- - ---------- ---- -- -- ---
-
-
-
--
---------- --
-Babel 配置文件支持两种格式：JSON 和 JavaScript。
在上面的代码中，我们的配置使用了 preset-env 预设。这个预设的作用是根据我们所配置的目标浏览器（"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]），自动将 ES6+ 转化为 ES3 代码。这样，我们就不需要手动配置大量的插件了。
现在，我们已经准备好了配置，接下来就是将 ES6+ 转化为 ES3 了。
以下是 ES6+ 的代码示例：
let list = [1, 2, 3]; let [a, b, c] = list; console.log(a, b, c);
执行以下命令，将 ES6+ 的代码转化为 ES3 的代码。
npx babel source.js -o output.js
执行完上述命令后，输出的代码如下所示：
"use strict";
var list = [1, 2, 3];
var a = list[0],
b = list[1],
c = list[2];
console.log(a, b, c);可以看到，Babel 按照我们配置的预设，将 ES6+ 的代码转化成了 ES3 的代码。我们已经可以兼容大多数浏览器了。
总结
使用 Babel 将 ES6+ 转化为 ES3 可以让我们在开发过程中，充分利用新特性，提高开发效率，同时也可以让我们的代码在大多数现代浏览器中运行。
步骤：
- 安装Babel
npm install @babel/core @babel/cli @babel/preset-env --save-dev
- 创建 .babelrc 文件，配置预设和插件
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- --- ---- ----- - ---------- ---- -- -- ---
-
-
-
--
---------- --
-- 执行命令转化 ES6+ 代码：
npx babel source.js -o output.js
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fa8b05f6b2d6eab317743a