BabelJS - 概述

BabelJS - 概述

BabelJS 是一个 JavaScript 转译器,它将新功能转译成旧标准。有了BabelJS,这些新功能可以在新旧浏览器上自由运行。澳大利亚开发人员 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 中可用的功能

FeaturesECMA Script version
Let + ConstES6
Arrow FunctionsES6
ClassesES6
PromisesES6
GeneratorsES6
IteratorsES6
ModulesES6
DestructuringES6
Template LiteralsES6
Enhanced ObjectES6
Default, Rest & Spread PropertiesES6
Async - AwaitES7
Exponentiation OperatorES7
Array.prototype.includes()ES7
String PaddingES8

BabelJS 管理以下两部分

  • transpiling
  • polyfilling

 

什么是 Babel-Transpiler?

Babel-transpiler 将现代 JavaScript 的语法转换为旧浏览器可以轻松理解的形式。例如,箭头函数、const、let 类将被转换为函数、var 等。这里的语法,即箭头函数被转换为普通函数,在两种情况下都保持功能相同。

什么是 Babel-polyfill?

avaScript 中添加了一些新功能,例如 promise、map 和 include。这些特征可以用在数组上;同样,当使用 babel 进行转译时,也不会被转换。如果新特性是一个方法或对象,我们需要使用 Babel-polyfill 和转译来使其在旧浏览器上工作。

这是 JavaScript 中可用的 ECMA 脚本功能列表,可以转译和polyfill

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

可以polyfill的 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-Plugins

Plugins 和 Presets 是 Babel 转换代码的配置细节。 Babel 支持许多插件,如果我们知道代码将在其中执行的环境,它们可以单独使用。

Babel-Presets

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

Babel-Polyfills

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

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 才能在旧浏览器上运行。

版权声明:著作权归作者所有。

文章写的不错呀。
是的,没有代码的说明是比较乏味的
文章总结得不错,就是代码少了一点
thumb_up 0 | star_outline 0 | textsms 3