ES6（即 ES2015）是 ECMAScript 标准的第六个版本，于 2015 年发布，它在语言结构、功能以及标准库方面都有了大幅度的改进。但是，由于 ES6 版本的浏览器兼容性较低，这使得很多前端工程师无法使用 ES6 的语言特性。为此，Babel 应运而生，它是一个 JavaScript 编译器，能够将 ES6 及其以上版本的代码转换成可以在 ES5 等老版本的浏览器上运行的 JavaScript 代码。
Babel 的安装和使用
安装
Babel提供了浏览器端、node环境和webpack-plugin三种安装方式，下面只介绍常用的webpack-plugin安装方式。
运行以下命令安装Babel：
--- ------- ---------- ------------ ----------- ----------------- -------
其中，babel-loader 是 webpack 所需的 Babel 模块，@babel/core 是 Babel 核心模块，@babel/preset-env 是 Babel 的预设模块。
配置
在项目的根目录下创建一个名为 .babelrc 的文件，用于配置 Babel 的处理方式和插件。以下的是一个示例代码。
- ---------- ---------------------- ---------- -- -
presets 是 Babel 所需的预设模块，@babel/preset-env 是根据环境自动推断预设的模块。plugins 是 Babel 的插件，可以根据需要添加不同的插件来处理不同的代码。
使用
在 webpack 中使用 Babel 很简单，只需要增加以下的配置
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--在这个配置中，我们的规则是让所有 .js 文件都被 Babel 处理，除了 node_modules 目录下的文件。这里的 babel-loader 是 webpack 所需的 Babel 模块的引用。
ES6 代码转换成 ES5
下面来看一个示例代码。
ES6 代码：
----- -------- - ------ -- - ------------------- ----------- --
转换后的 ES5 代码：
---- -------- --- -------- - -------- -------------- - ------------------- - - ---- - ----- --
这个示例代码展示了一个利用 ES6 的箭头函数来实现函数表达式的例子。在 Babel 处理它之前，这段代码会报语法错误。但是，使用了 Babel 之后，能够顺利地在常规的浏览器上运行。
ES6 代码中，函数表达式使用箭头函数来替代了传统的 function 关键字；同时，模板字符串使用反引号括起来，而不是传统的单引号或双引号。通过 Babel 转换后，这些代码变成了适用于 ES5 的普通代码。
总结
Babel 是一个重要的前端工具，它让我们能够在前端开发中享受 ES6 的语言特性，同时又不损失在可用性和兼容性方面的优势。通过以上的几个步骤，我们可以学会如何使用 Babel 把 ES6 代码转换成 ES5，为自己的项目增加更多的技术可用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6648421fd3423812e46d4437