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

比較常見的工具包含:

  • 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 的代碼

其實原理就是這樣而已


結語

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

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

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

Summary
Abstract syntax tree
Article Name
Abstract syntax tree
Description
在前端開發中,我們往往會使用一些前端的開發工具來提升我們開發的效率和速度比較常見的工具包含:* Webpack (代碼打包工具) * ESLint (Conding Style 管理工具) * Babel (ES6 代碼的編譯工具) * ...不過上面舉例的項目基本上都跟我們在編譯時,撰寫的代碼比較又直接關係這是如何做到的? 這是一個還蠻有趣的問題,讓我們繼續往下看
Author

Facebook 功能: