Babel 簡介

本教程咱們學習 Babel 的基礎知識，Babel 是一個用於 web 開發，且自由開源的 JavaScript 編譯器、轉換器。主要用於在當前和較舊的瀏覽器或環境中將 ECMAScript 2015+ 代碼轉換爲 JavaScript 的向後兼容版本。

Babel 使軟件開發者可以以偏好的編程語言或風格來寫做源代碼，並將其利用 Babel 翻譯成 JavaScript，是現今在瀏覽器最經常使用的編程語言。

下列是 Babel 的使用場景：

• 語法轉換。
• 目標環境中缺乏的 Polyfill 功能。
• 源代碼轉換（codemods）

示例：

例如將 ES2015 中的箭頭函數編譯成 ES5：

[1, 2, 3].map((n) => n + 1);

編譯後的 ES5 代碼以下所示：

[1, 2, 3].map(function (n) {
  return n + 1;
});

這兩段代碼的功能是同樣的，可是由於 ES2015 和 ES5 的語法有所不一樣，因此編譯後的代碼也不一樣。

Babel運行方式和插件

Babel 的編譯總共分爲三個階段：解析（parsing），轉換（transformation），生成（generate）。

Babel 自己不具備任何轉化功能，Babel 的轉換功能都是經過插件（plugin）來實現的，把轉化的功能都分解到一個個插件裏面。所以當咱們不配置任何插件時，通過 Babel 的代碼和輸入是相同的。

插件總共分爲兩種：

• 語法插件：當咱們添加語法插件以後，在解析這一步就使得 Babel 可以解析更多的語法。
• 轉譯插件：而添加轉譯插件以後，在轉換這一步把源碼轉換並輸出。這也是咱們使用 Babel 最本質的需求。

同一類語法可能同時存在語法插件版本和轉譯插件版本。若是咱們使用了轉譯插件，就不用再使用語法插件了。

preset

preset 預約義的一系列插件的組合，用於將特定的語法轉換爲當前環境使用的語法，避免了本身單獨去挑選插件。

preset 分爲如下幾種：

• 官方內容，目前包括 env、react、flow、minify 、typescript 等。
• stage-x，這裏麪包含的都是當年最新規範的草案，每一年更新。能夠細分爲：
  • Stage 0：設想（Strawman）：只是一個想法，可能有 Babel插件。
  • Stage 1：建議（Proposal）：這是值得跟進的。
  • Stage 2： 草案（Draft）：初始規範。
  • Stage 3： 候選（Candidate）：完成規範並在瀏覽器上初步實現。
  • Stage 4：完成（Finished）：將添加到下一個年度版本發佈中。