從前端編譯到手寫 Babel

編譯這個概念好像離前端很遙遠，遙遠到好像工做面試都不要求相關的知識。

可是，真的遙遠麼？

咱們天天用 Babel、Typescript Compiler 來作代碼的轉換，用 Vue Template Compiler 來作 Vue 模版的解析，還會用 Eslint 作代碼的靜態檢查、用 Terser 作代碼壓縮，最重要的是咱們的 JS 代碼是跑在 JS 引擎上的。

這些不都是編譯技術麼？

如今，你還以爲編譯離前端很遙遠麼？

其實，並非編譯技術在前端用不到，而偏偏是由於太過經常使用而容易被忽略。咱們會去學習一些工具的使用，但不會去學習更底層的一些原理。

因此，我第一次的直播分享就起名爲《從 Babel 深刻前端編譯原理》，就是想借助 Babel 來像你們展現一下編譯技術能作什麼：

能夠作一些對業務有意義的事情： 自動埋點、自動國際化、自動生成 API 文檔

能夠作一些工具：Typescript 類型檢查、壓縮混淆、Linter

還能夠基於 Babel Parser 實現 JS 解釋器

這些，直播中都實現了。

live.juejin.cn/4354/481502…

固然，首先仍是從基礎開始，要先了解編譯流程、AST、api，以後纔是各類實戰。直播的前半部分是一些基礎知識的鋪墊。

講完以後，咱們作了總結：

前端領域主要用到轉譯、解釋、編譯這三種編譯技術。

轉譯是源碼轉源碼的轉換編譯器，好比 Babel、Typescript、Terser 等都是這種，這也是咱們最經常使用的

解釋是解釋執行源碼，好比各類 JS 引擎，包括 V八、JavascriptCore，Hermes 等

編譯是指高級語言到低級語言，好比字節碼的轉換，前端的新技術 WebAssembly 就涉及到編譯器的知識。

直播和小冊中可以入門前兩種。

直播結束以後，有很大一部分同窗對前端領域的編譯技術能作什麼有個一個清晰的認識，也知道了 Babel 這個工具怎麼用。

可是，這些還不夠，咱們不能只知足於用，就像小冊的名字《Babel 插件通關祕籍》，只會用怎麼算通關呢？

因此，咱們手寫一個 Babel，幫助你們完全通關。

下期直播的內容就是《手寫 Babel》。

（在那以前小冊也會更完的）

若是說第一期是介紹編譯技術能作什麼，是一個廣度的擴充，那麼第二期就是把 Babel 講透，是一個深度的擴充。

沒看第一期的同窗，能夠看下回放。對 Babel 感興趣的同窗能夠繼續參與第二期直播（8 月 12 晚 8點），一起手寫一個 Babel！

編譯，其實並不遙遠。