BabelJS教程

BabelJS - 概述

BabelJS 是一个JavaScript转换器，它将新功能转换为旧标准.有了这个，这些功能可以在新旧浏览器上运行，无需麻烦.澳大利亚开发商Sebastian McKenzie创办了BabelJS.

为什么选择BabelJS？

JavaScript是浏览器理解的语言.我们使用不同的浏览器运行我们的应用程序 : Chrome，Firefox，Internet Explorer，Microsoft Edge，Opera，UC浏览器等.ECMA Script是JavaScript语言规范; ECMA Script 2015 ES5是稳定版本，适用于所有新旧浏览器.

在ES5之后，我们有ES6，ES7和ES8. ES6发布了许多新功能，并非所有浏览器都完全支持.这同样适用于ES7，ES8和ESNext(下一版ECMA脚本).目前尚不确定所有浏览器何时可以与所有发布的ES版本兼容.

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

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

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

Features	ECMA Script version
Let + Const	ES6
Arrow Functions	ES6
Classes	ES6
Promises	ES6
Generators	ES6
Iterators	ES6
Modules	ES6
Destructuring	ES6
Template Literals	ES6
Enhanced Object	ES6
Default, Rest & Spread Properties	ES6
Async - Await	ES7
Exponentiation Operator	ES7
Array.prototype.includes()	ES7
String Padding	ES8

BabelJS管理以下两部分 :

transpiling
polyfilling

什么是Babel-Transpiler？

Babel-transpiler将现代JavaScript的语法转换为一种形式，旧版浏览器可以轻松理解.例如，箭头函数，const，让类将转换为函数，var等.这里的语法，即箭头函数被转换为正常函数，在两种情况下保持功能相同.

什么是Babel-polyfill？

JavaScript中添加了一些新功能，如promises，maps和includes.这些功能可用于阵列;同样，当使用和转换使用babel时将不会被转换.如果新功能是一个方法或对象，我们需要使用Babel-polyfill和transpil来使其在旧浏览器上工作.

以下是可用的ECMA脚本功能列表JavaScript，可以进行转换和填充&减去;

Classes
Decorators
Const
Modules
Destructing
Default parameters
Computed property names
Object rest/spread
Async functions
Arrow functions
Rest parameters
Spread
Template Literals

ECMA脚本功能可以是polyfilled :

Promises
Map
Set
Symbol
Weakmap
Weakset
includess
Array.from, Array.of,Array#find,Array.buffer, Array#findIndex
Object.assign,Object.entries,Object.values

BabelJS的功能

在本节中，我们将了解BabelJS的不同特征.以下是BabelJS最重要的核心功能 :

Babel-Plugins

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

Babel-Presets

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也可以与JSX语法一起使用，并且可以用JSX格式编译.
BabelJS支持插件，polyfill，babel-cli，可以轻松处理大型项目.