? babel到底是什麼❓

Topthinking發表於2018-02-01

簡單說明

?‍?‍編寫的程式碼

首先通過babylonparse方法,將程式碼轉為抽象語法樹(AST),之後會呼叫babel相關的外掛更改AST語法樹

最後將修改後的AST再通過babel-generator轉換為最終待執行的程式碼

轉換過程主要依靠babel-typesbabel-traverse便捷地對AST語法樹進行增刪改查

這邊的外掛包括presetsplugins

案例

小外掛案例 ? 地址

頁面左上角是專案原始碼,右下角是轉譯後的程式碼

頁面左下角是外掛原始碼,右上角是轉譯後的AST

一個確保所有的JSXElement上的className裡面都要有且僅有一個xmly這個字元的外掛

連結

babel官方詳細介紹文件

實現一個樣式便捷引用的小外掛功能

基於styled-jsx,訪問地址,請點選

相關文章