>[success] # babel ~~~ 1.大部分編譯器的工作可以被分解為三個主要階段：解析（Parsing）， 轉化（Transformation）以及 代碼生成（Code Generation） 1.1.'解析'將源代碼轉換為一個更抽象的形式。 1.2.'轉換'接受解析產生的抽象形式并且操縱這些抽象形式做任何編譯器想讓它們做的事。 1.3.'代碼生成'基于轉換后的代碼表現形式（code representation）生成目標代碼。 ~~~ >[danger] ##### 解析 ~~~ 1. 詞法分析—— tokenizer 通過一個叫做tokenizer（詞素生成器，也叫lexer）的工具將源代碼 分解成一個個詞素。（詞素是描述編程語言語法的對象。它可以描述數字，標識符，標點符號， 運算符等等。） 2.語法分析—— parser 接收詞素并將它們組合成一個描述了源代碼各部分之間關系的中間表達 形式：抽象語法樹。（抽象語法樹是一個深度嵌套的對象，這個對象以一種既能夠簡單地操作又 提供很多關于源代碼信息的形式，來展現代碼。） ~~~ >[danger] ##### 轉換 ~~~ 1.編譯器的下一個階段是轉換階段。再回顧一遍，這個過程接收解析生成的抽象語法樹并對它做出 改動。轉換階段可以改變抽象語法樹使代碼保持在同一個語言（例如Babel，Babel接收的是JS代 碼生成的也是JS代碼），或者編譯成另外一門語言。 2.babel 中 traverser函數，這個函數接收抽象語法樹以及一個訪問者對象 接收創造的抽象語法樹并將它和一個訪問者對象傳給`traverser`函數。然后創造一個新的抽象 語法樹 ~~~ >[danger] ##### babel 是如何工作的？ ~~~ 1.babel 是 source to source 的轉換，整體編譯流程分為三步： 1.1.parse：通過 parser 把源碼轉成抽象語法樹（AST） 1.2.transform：遍歷 AST，調用各種 transform 插件對 AST 進行增刪改 1.3.generate：把轉換后的 AST 打印成目標代碼，并生成 sourcemap ~~~ 1. 解析 ——[@babel/parser](https://github.com/babel/babel/tree/master/packages/babel-parser)（包含 上方提到的[tokenizer](https://github.com/babel/babel/tree/master/packages/babel-parser/src/tokenizer)、[parser](https://github.com/babel/babel/tree/master/packages/babel-parser/src/parser)），根據 es2015, es2016… 標準，生成 AST 2. 轉換 ——[@babel/traverse](https://github.com/babel/babel/tree/master/packages/babel-traverse)\+ plugins （visitor） 3. 代碼生成 ——[@babel/generator](https://github.com/babel/babel/tree/master/packages/babel-generator) * [圖片來自](https://mp.weixin.qq.com/s/LlQRx5SPmFgnTDO8VunGnw)  >[info] ## 本大章節參考文章參考來源 [Babel 插件通關秘籍](https://juejin.cn/book/6946117847848321055/section/6946578914764390434) [前端基礎建設與架構 30 講](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=584#/content) [# 抽象語法樹 AST 與 編譯器 Compiler](http://xaber.co/2019/09/04/%E6%8A%BD%E8%B1%A1%E8%AF%AD%E6%B3%95%E6%A0%91-AST-%E4%B8%8E-%E7%BC%96%E8%AF%91%E5%99%A8-Compiler/) [babel-從入門到上手倪睿 大轉轉FE](https://mp.weixin.qq.com/s/LlQRx5SPmFgnTDO8VunGnw) [@babel/plugin-transform-runtime](https://blog.windstone.cc/es6/babel/@babel/plugin-transform-runtime.html) https://github.com/browserslist/browserslist#queries