什麼是 Babel？

官方的解釋 Babel 是一個 JavaScript 編譯器，用於將 ECMAScript 2015+ 版本的程式碼轉換為向後相容的 JavaScript 語法，以便能夠執行在當前版本和舊版本的瀏覽器或其他環境中。

通俗來講，Babel 是 Javascript 編譯器 ,將 ES6,ES7 ,ES8 轉換成 瀏覽器都支援的ES5 語法,並提供一些外掛來相容瀏覽器API的工具。

簡單說 Babel 的工作就是：

• 語法轉換
• 通過 Polyfill 的方式在目標環境中新增缺失的特性
• JS 原始碼轉換

Babel 的基本原理

原理很簡單，核心就是 AST (抽象語法樹)。首先將原始碼轉成抽象語法樹，然後對語法樹進行處理生成新的語法樹，最後將新語法樹生成新的 JS 程式碼，整個編譯過程可以分為 3 個階段 parsing (解析)、transforming (轉換)、generating (生成)，都是在圍繞著 AST 去做文章，話不多說上圖：

組成

Babel 的核心是在 @babel/core 這個npm 包，圍繞在它周圍的分別是
@babel/core AST轉換的核心

@babel/cli 打包工具

@babel/plugin* Babel 外掛機制，Babel基礎功能不滿足的時候,手動新增些

@babel/preset-env 把許多 @babel/plugin 綜合了下，減少配置

@babel/polyfill 把瀏覽器某些不支援API，相容性程式碼全部匯入到專案,不管你是不是用到,缺點是程式碼體積特別大

@babel/runtime 把你使用到的瀏覽器某些不支援API，按需匯入,程式碼少

上面這些配置總得放在一個地方,.babelrc/babel.config.js 就是放這些配置地方，例如

{
    "presets": [
        ["@babel/preset-env"]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"],
    ]
}

參考：
Babel學習系列
對 babel polyfill 的一些理解
前端工程師的自我修養-關於 Babel 那些事兒