BabelJS - 概述

---

---

BabelJS 是一個 JavaScript 轉譯器，它將新特性轉譯成舊標準。這樣，這些特性就可以在舊版和新版瀏覽器上無障礙執行。澳大利亞開發者 Sebastian McKenzie 建立了 BabelJS。

為什麼選擇 BabelJS？

JavaScript 是瀏覽器理解的語言。我們使用不同的瀏覽器來執行我們的應用程式——Chrome、Firefox、Internet Explorer、Microsoft Edge、Opera、UC 瀏覽器等等。ECMAScript 是 JavaScript 語言規範；ECMAScript 2015 (ES6) 是一個穩定的版本，在新舊瀏覽器中都能很好地工作。

在 ES5 之後，我們有了 ES6、ES7 和 ES8。ES6 釋出了許多新特性，並非所有瀏覽器都完全支援。ES7、ES8 和 ESNext（ECMAScript 的下一個版本）也是如此。目前尚不清楚所有瀏覽器何時才能相容所有已釋出的 ES 版本。

如果我們計劃使用 ES6 或 ES7 或 ES8 特性來編寫程式碼，由於缺乏對新更改的支援，它可能會在某些舊版瀏覽器中出現故障。因此，如果我們想在程式碼中使用 ECMAScript 的新特性，並希望它能夠在所有可能的瀏覽器上執行，我們需要一個工具將我們的最終程式碼編譯成 ES5。

Babel 就能做到這一點，它被稱為轉譯器，可以將程式碼轉譯成我們想要的 ECMAScript 版本。它具有預設和外掛等特性，可以配置我們需要轉譯程式碼的 ECMAScript 版本。使用 Babel，開發者可以使用 JavaScript 中的新特性編寫程式碼。使用者可以使用 Babel 轉譯程式碼；之後，這些程式碼可以在任何瀏覽器中無任何問題地使用。

下表列出了 ES6、ES7 和 ES8 中可用的特性：

BabelJS 管理以下兩部分：

• 轉譯
• polyfill

什麼是 Babel 轉譯器？

Babel 轉譯器將現代 JavaScript 的語法轉換為舊版瀏覽器可以輕鬆理解的形式。例如，箭頭函式、const、let 類將被轉換為函式、var 等。這裡語法，即箭頭函式，被轉換為普通函式，同時保持兩種情況下的功能相同。

什麼是 Babel polyfill？

JavaScript 中添加了一些新特性，例如 Promise、Map 和 includes。這些特性可以用於陣列；但是，當使用 babel 進行轉譯時，它們不會被轉換。如果新特性是方法或物件，我們需要結合使用 Babel polyfill 和轉譯才能使其在舊版瀏覽器中工作。

以下是 JavaScript 中可用的 ECMAScript 特性列表，這些特性可以進行轉譯和 polyfill：

• 類
• 裝飾器
• Const
• 模組
• 解構
• 預設引數
• 計算屬性名
• 物件 rest/spread
• 非同步函式
• 箭頭函式
• 剩餘引數
• 擴充套件運算子
• 模板字面量

可以進行 polyfill 的 ECMAScript 特性：

• Promise
• Map
• Set
• Symbol
• WeakMap
• WeakSet
• includes
• 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 轉譯器提供的配置細節，指示 Babel 以特定模式進行轉譯。我們需要使用預設，其中包含我們希望程式碼被轉換到的環境。例如，`es2015` 預設將程式碼轉換為 `es5`。

Babel Polyfill

有些特性（例如方法和物件）無法進行轉譯。在這種情況下，我們可以使用 babel-polyfill 來方便在任何瀏覽器中使用這些特性。讓我們考慮 Promise 的示例；為了使該特性在舊版瀏覽器中工作，我們需要使用 polyfill。

Babel Polyfill

Babel-cli 帶有一組命令，可以透過命令列輕鬆編譯程式碼。它還具有外掛和預設等特性，可以與命令一起使用，從而輕鬆地一次性轉譯程式碼。

使用 BabelJS 的優勢

在本節中，我們將瞭解使用 BabelJS 的各種優勢：

• BabelJS 為所有新增到 JavaScript 的新特性提供向後相容性，並且可以在任何瀏覽器中使用。

• BabelJS 能夠轉譯下一個即將釋出的 JavaScript 版本——ES6、ES7、ESNext 等。

• BabelJS 可以與 gulp、webpack、flow、react、typescript 等一起使用，使其功能非常強大，可以用於大型專案，從而簡化開發者的工作。

• BabelJS 還與 React JSX 語法一起工作，並且可以編譯成 JSX 形式。

• BabelJS 支援外掛、polyfill 和 babel-cli，使其易於處理大型專案。

使用 BabelJS 的缺點

在本節中，我們將瞭解使用 BabelJS 的各種缺點：

• BabelJS 程式碼在轉譯時會更改語法，這使得在生產環境中釋出時難以理解程式碼。

• 與原始程式碼相比，轉譯後的程式碼體積更大。

• 並非所有 ES6/7/8 或即將推出的新特性都可以進行轉譯，我們必須使用 polyfill 才能使其在舊版瀏覽器中工作。

這是 babeljs 的官方網站 https://babeljs.io/。