BabelJS 概述学习手册
收录于 2023-04-20 00:10:05 · English · بالعربية · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
BabelJS 是一个 JavaScript 转译器，可将新功能转译为旧标准。有了这个，这些功能可以在新旧浏览器上轻松运行。澳大利亚开发人员 Sebastian McKenzie 创立了 BabelJS。
为什么选择 BabelJS？
JavaScript 是浏览器可以理解的语言。我们使用不同的浏览器来运行我们的应用程序——Chrome、Firefox、Internet Explorer、Microsoft Edge、Opera、UC 浏览器等。ECMA Script 是 JavaScript 语言规范； ECMA Script 2015 ES6 是稳定版本，适用于所有新旧浏览器。
在 ES5 之后，我们有了 ES6、ES7 和 ES8、 ES6 发布了许多新功能，但并非所有浏览器都完全支持。这同样适用于 ES7、ES8 和 ESNext（ECMA 脚本的下一个版本）。现在还不确定什么时候可以让所有浏览器兼容所有发布的 ES 版本。
如果我们计划使用 ES6 或 ES7 或 ES8 特性来编写我们的代码，由于缺乏对新更改的支持，它在一些旧浏览器中往往会崩溃。因此，如果我们想在我们的代码中使用 ECMA Script 的新特性并希望在所有可用的浏览器上运行它，我们需要一个工具来编译我们在 ES5 中的最终代码。
Babel 做同样的事情，它被称为转译器，可以转译我们想要的 ECMA 脚本版本中的代码。它具有诸如预设和插件之类的功能，可配置我们转译代码所需的 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、let 类将被转换为函数、var 等。这里的语法，即箭头函数被转换为普通函数，在两种情况下保持相同的功能。
什么是 Babel-polyfill？
JavaScript 中添加了一些新功能，例如承诺、映射和包含。这些特征可以用于阵列；同样，使用 babel 使用和转译时不会被转换。如果新特性是一个方法或对象，我们需要使用 Babel-polyfill 和转译来使其在旧浏览器上工作。
以下是 JavaScript 中可用的 ECMA 脚本功能列表，可以转译和填充-
Classes
Decorators
Const
Modules
Destructing
Default parameters
Computed property names
Object rest/spread
Async functions
Arrow functions
Rest parameters
Spread
Template Literals
可以填充的ECMA脚本功能-
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 插件
插件和预设是 Babel 转译代码的配置细节。 Babel 支持许多插件，如果我们知道代码将在其中执行的环境，它们可以单独使用。
Babel 预设
Babel 预设是一组插件，即 babel-transpiler 的配置细节，指示 Babel 在特定模式下进行转译。我们需要使用预设，它具有我们想要转换代码的环境。例如，
es2015 预设会将代码转换为
es5。
Babel-Polyfills
有一些特性，如方法和对象，不能被转译。在这种情况下，我们可以使用 babel-polyfill 来促进在任何浏览器中使用功能。让我们考虑 Promise 的例子；为了让该功能在旧浏览器中工作，我们需要使用 polyfill。
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/
