BabelJS是一个JavaScript编译器，它将新功能转换为旧标准。这样，这些功能可以在新旧浏览器上轻松运行。澳大利亚开发商Sebastian McKenzie创立了BabelJS。

为什么选择BabelJS？

JavaScript是浏览器可以理解的语言。我们使用不同的浏览器来运行我们的应用程序-Chrome，Firefox，Internet Explorer，Microsoft Edge，Opera，UC浏览器等。ECMA脚本是JavaScript语言规范； ECMA Script 2015 ES6是稳定版本，在所有新旧浏览器中均可正常运行。

在ES5之后，我们有了ES6，ES7和ES8。 ES6发布了许多新功能，并非所有浏览器都完全支持。同样适用于ES7，ES8和ESNext（ECMA Script的下一个版本）。现在还不确定何时所有浏览器都可能与发布的所有ES版本兼容。

如果我们计划使用ES6或ES7或ES8功能来编写代码，则由于缺乏对新更改的支持，在某些旧版浏览器中它往往会崩溃。因此，如果我们想在代码中使用ECMA Script的新功能，并希望在所有可能的浏览器上运行它，我们需要一个工具来在ES5中编译最终代码。

Babel也做同样的事情，它被称为转译器，可以在所需的ECMA Script版本中转译代码。它具有预设和插件之类的功能，可配置我们需要转换代码的ECMA版本。使用Babel，开发人员可以使用JavaScript中的新功能来编写代码。用户可以使用Babel获得转译的代码；这些代码以后可以在任何浏览器中使用，而不会出现任何问题。

下表列出了ES6，ES7和ES8中可用的功能-

BabelJS管理以下两个部分-

• 转堆
• 充填

什么是Babel-Transpiler？

Babel-transpiler将现代JavaScript的语法转换为一种形式，旧版本的浏览器很容易理解。例如，arrow 函数，const，let类将转换为函数，var等。这里，语法（即arrow函数）转换为普通函数，在两种情况下都保持相同的功能。

什么是Babel-polyfill？

JavaScript中增加了一些新功能，例如承诺，地图和包含。这些功能可以在数组上使用；同样，使用babel进行编译时，将不会进行转换。如果新功能是方法或对象，则需要将Babel-polyfill与转译一起使用，以使其在较旧的浏览器上运行。

这是JavaScript中可用的ECMA脚本功能的列表，可以对其进行转译和填充-

• 班级
• 装饰工
• 康斯特
• 模组
• 破坏
• 默认参数
• 计算的属性名称
• 对象休息/传播
• 异步功能
• 箭头功能
• 休息参数
• 传播
• 模板字面量

可以多填充的ECMA脚本功能-

• 承诺
• 地图
• 组
• 符号
• 弱图
• 弱集
• 包括
• Array.from，Array.of，Array＃find，Array.buffer，Array＃findIndex
• Object.assign，Object.entries，Object.values

BabelJS的功能

在本节中，我们将学习BabelJS的不同功能。以下是BabelJS最重要的核心功能-

Babel-Plugins

插件和预设是Babel转换代码的配置详细信息。如果我们知道代码将在其中执行的环境，Babel支持许多插件，这些插件可以单独使用。

Babel预设

Babel预设是一组插件，即babel-transpiler的配置详细信息，指示Babel以特定模式进行转换。我们需要使用预设，该预设具有我们想要在其中转换代码的环境。例如， es2015预设会将代码转换为es5 。

Babel-Polyfills

有一些功能，例如方法和对象，无法转译。在这种情况下，我们可以使用babel-polyfill来促进在任何浏览器中使用功能。让我们考虑一下诺言的例子。为了使该功能在较旧的浏览器中起作用，我们需要使用polyfills。

Babel-Polyfills

Babel-cli附带了一堆命令，可以在命令行上轻松地编译代码。它还具有诸如插件和预设之类的功能，可与命令一起使用，从而使一次性轻松转换代码变得容易。

使用BabelJS的优点

在本节中，我们将学习与使用BabelJS相关的不同优势-

• BabelJS为JavaScript的所有新增功能提供向后兼容性，并且可以在任何浏览器中使用。

• BabelJS可以进行转换以采用下一个即将发布的JavaScript版本-ES6，ES7，ESNext等。

• BabelJS可以与gulp，webpack，flow，react，typescript等一起使用，使其功能非常强大，并且可以与大型项目一起使用，从而简化了开发人员的生活。

• BabelJS还可以与react JSX语法一起使用，并且可以JSX形式进行编译。

• BabelJS支持插件，polyfills和babel-cli，这使得处理大型项目变得容易。

使用BabelJS的缺点

在本节中，我们将学习使用BabelJS的不同缺点-

• BabelJS代码在编译时会更改语法，这使得代码在正式发布时难以理解。

• 与原始代码相比，转译的代码大小更大。

• 并非所有ES6 / 7/8或即将推出的新功能都可以编译，我们必须使用polyfill使其在较旧的浏览器上运行。

这是babeljs的官方网站https://babeljs.io/ 。