【Babel】Babel的工作原理

Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其它環境中。

// Babel 輸入： ES2015 箭頭函數
[1, 2, 3].map((n) => n + 1)

// Babel 輸出： ES5 語法實現的同等功能
[1, 2, 3].map(function(n) {
  return n + 1
})

Babel的工作流程圖：

 工作原理描述：

Babel 首先是把原始代碼（第一個Code）通過babylon 轉換成抽象語法樹（Abstract Syntax Tree, AST），接下來使用 babel-traverse 將抽象語法樹轉換成目標語法的抽象語法樹，如：ES5或ES3，此外還可以通過plugins干預進行其它處理，轉換成最終的AST，最後通過 babel-generator 將抽象語法樹轉換成瀏覽器可識別的代碼。