2 min read javascript

[JavaScript] 抽象語法樹 Abstract syntax tree ：打包工具 與 代碼編譯 的核心原理

[JavaScript] 抽象語法樹 Abstract syntax tree ：打包工具 與 代碼編譯 的核心原理

在前端開發中，我們往往會使用一些前端的開發工具來提升我們開發的效率和速度

比較常見的工具包含：

  • Webpack (代碼打包工具)
  • ESLint （Conding Style 管理工具）
  • Babel (ES6 代碼的編譯工具)
  • …

不過上面舉例的項目基本上都跟我們在編譯時，撰寫的代碼比較又直接關係

這是如何做到的？ 這是一個還蠻有趣的問題，讓我們繼續往下看

拿 Babel 來舉例，他是如何直接將 ：

// ES6 的箭頭函式
const myfn() => {
  return 'hello world'
}

// 轉譯為 ES5
var myfn = function(){
  return 'hello world'
}

這些操作其實都跟 抽象語法樹 Abstract syntax tree (簡稱 AST ) 脫不了關係

也是這篇文章的主題

抽象語法樹 Abstract syntax tree

那什麼是 抽象語法樹 AST ？

其實可以直接把他理解為，直接將 代碼 轉換成 樹狀 的方式表示：

例如：

var str = 'Hello World'

抽象語法樹 AST 的表示：

{
 'type': 'var'
 'name': 'str'
 'value': 'Hello World'
}

類似這種這種玩意，當然並不上像上面的的東西這麼簡單

上面的樹狀表示只是我為了方便理解的表示方式方式而已，請不要當真

實際上的編譯結果可以去 astexplorer 的網站來觀看結果

當然我們可以隨心所欲的將 JavaScript 的代碼轉為 AST 的格式

再藉由 編輯 AST 語法樹 的物件後，在編譯成我們要的 JavaScript 的代碼

其實原理就是這樣而已

結語

在這篇文章中，只是了解這些 開發工具 操作原理而已，其餘更詳細的內容，網路上的資源還是很豐富的

下面分享了幾篇很棒的文章，寫的非常詳細

如果對這些東西有興趣的夥伴們非常推薦閱讀：

Facebook 功能：