本教程我們學習 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）：將添加到下一個年度版本發佈中。