前端構建環境工具之webpack中babel的工做原理

如圖所示爲babel工做原理圖： 整個babel粗略地其實就是三個轉化節點：從獲取入口文件(entry)後通過babylon這個工具的解析(parse)， 進入AST(abstract syntax tree)抽象語法樹的節點，因爲AST只是一種對於entry代碼的描述，並不能被瀏覽器運行， 因此最終還須要被轉化爲output這個出口文件，也就是代碼的形式。

接下來咱們對AST這個節點進行展開，AST在parse後，原來entry文件使用的代碼語法爲es6(也有多是es7/8/9/10，這裏僅僅舉例方便說明)不會發生改變，(transform)改變的僅僅是code->AST，也就是代碼形式->抽象語法樹,從能被瀏覽器運行->不能被瀏覽器運行。

如圖所示，首個AST節點須要被進一步處理，通過babel-traverse的加工後，ES6->ES5/3(ES5或者ES3),語法上"降維"了， 對於不少不支持ES6-10的瀏覽器而言，ES5/3是能夠很好的被支持的。至此，AST還不完善，就是這樣的代碼通過層層處理後的結果 會有安全性、不及開發者預期的問題。因此還須要通過plugins(插件)對它的加工，該步驟的加工能夠對代碼進行增刪改，繼續生成本圖中最後的那個AST。

最終階段就是通過babel-generator這個工具完成generator(生成)output(出口文件)這樣的結果，形式也從AST->code。而code最終也能夠被瀏覽器所運行。

以上內容是通過我的學習消化後的結果，若有不嚴謹之處，忘你們多多包涵，畢竟是個人第一篇技術文。謝謝！ 歡迎評論，歡迎指導