你不知道的 babel

提到 babel，你會想到什么？

• 可以把項目中的 es6、es7 等代碼轉成目標環境支持的代碼

• 可以自動 polyfill 目標環境不支持的 api

• taro （小程序轉譯工具）是基于 babel 實現的

• babel 的插件很豐富

• 我們公司現在用 babel 來編譯 typescript，不用 tsc 了

• 我基于 babel 做過自動埋點的功能，得到了領導的夸獎

• ...

其實 babel 能做的不只是這些，它能做 3 類事情：

轉譯 esnext、typescript、flow 等到目標環境支持的 js

這個是最常用的功能，用來把代碼中的 esnext 的新的語法、typescript 和 flow 的語法轉成基于目標環境支持的語法的實現。并且還可以把目標環境不支持的 api 進行 polyfill。

babel7 支持了 preset-env，可以指定 targets 來進行按需轉換，轉換更加的精準，產物更小。

一些特定用途的代碼轉換

babel 是一個轉譯器，暴露了很多 api，用這些 api 可以完成代碼到 AST 的 parse，AST 的轉換，以及目標代碼的生成。

開發者可以用它來來完成一些特定用途的轉換，比如函數插樁（函數中自動插入一些代碼，例如埋點代碼）、自動國際化、default import 轉 named import 等。

現在比較流行的小程序轉譯工具 taro，就是基于 babel 的 api 來實現的。

代碼的靜態分析

對代碼進行 parse 之后，能夠進行轉換，是因為通過 AST 的結構能夠理解代碼。理解了代碼之后，除了進行轉換然后生成目標代碼之外，也同樣可以用于分析代碼的信息，進行一些檢查。

babel 還能做什么？

babel 是前端業務開發和工具鏈開發中必不可少的工具，我們每天都在用，可是你有想過這些問題么：

• 怎么寫一個 babel 插件來做自定義的代碼轉換？

• 業務開發中有哪些地方可以用 babel 來做自動化？

• babel 是怎么實現的？

還有

• linter 是怎么實現的？

• typescript 類型檢查是怎么實現的？

• 壓縮混淆工具的原理是什么？

• 打包工具是如何分析代碼依賴關系的？

• api 文檔如何自動生成？

上面這些都可以用 babel 來實現，或許你并沒有想過 babel 有這么大的能量， 學會了 babel，絕對能讓你提升一個段位 。

基于 babel 實現完整工具鏈

我們來理一下這些工具的實現思路（所有下面列的工具都有實現代碼放在 github）

自動國際化

國際化是把寫死的字符串字面量換成從資源包取值的方式，babel 可以分析出代碼中的字符串字面量，把它替換成一個函數調用語句，然后自動引入資源包。基于 babel，我們完全可以做到自動國際化。

自動生成 api 文檔

我們在寫 api 的時候，會在上方添加注釋，那么是不是能把這些注釋內容還有關聯的函數、class 的信息提取出來，用一定的模版來生成 api 文檔呢？沒錯，babel 可以做到。

linter

我們整天用 eslint、stylelint 來做代碼規范的檢查，其實他們不過就是對 AST 做了校驗，這些我們用 babel 完全可以做到。可以基于 babel 實現 eslint。

type checker

typescript 是給代碼添加了靜態的類型信息，可以在編譯期間進行類型檢查，也可以輔助做代碼的智能提示，現在基本是前端必備技能了。可是你有想過 typescript 怎么實現的么？在小冊中 我們會手寫一個 ts type checker，讓你真正理解 typescript！

壓縮混淆

前端代碼上生產肯定要做壓縮，做混淆，這個我們整天都在用，可是你知道他的實現原理么，我們能不能用 babel 來實現一下。答案是肯定的，在小冊中 我們會實現壓縮混淆的功能 。

js 解釋器

v8 引擎的實現原理是什么，解釋型語言都是怎么解釋代碼的。我們能不能實現一個 js 解釋器，是可以的，《babel 插件通關秘籍》小冊中我們會基于 babel parser 實現一個 js 解釋器。

手寫 babel

可能你會問，上面的這些都是基于 babel，那如果沒有 babel 呢？

沒有 babel 我們就實現一個 babel，小冊最后 我們會實現一個簡易但可用的 babel，讓你真正理解 babel 的原理，真正掌握 babel 。

上面的解釋器和類型檢查的內容，王垠賣 12000，見下圖，所以這本小冊絕對超值。

大綱

上面說了很多小冊的內容，下面是小冊的完整目錄：

不只是 babel

雖然上面的實戰都是基于 babel 的，可是你學到的只是 babel 么？

不是的，上面的實戰案例涉及到完整的工具鏈，從文檔生成、lint、type check、壓縮混淆到 js 解釋器等等，這幾乎是前端開發的閉環了。 以此為抓手，學到的是整條工具鏈的實現思路 。

上面的工具還是集中在前端領域，但其中轉譯器、解釋器的實現思路確是通用的，編譯原理主要就是學編譯器、轉譯器、解釋器三部分， 學完整本小冊，相信也能幫助你入門編譯原理 。

總結

babel 是前端領域幾乎是必備的工具，基于它可以完成很多功能，甚至是打造整條工具鏈，我們在小冊中會實現 linter、type cheker、壓縮混淆、api 文檔自動生成、js 解釋器等等一系列功能。其中解釋器和類型檢查的功能在王垠那里能賣 12000，對比之下，這本小冊內容和價格絕對很良心了。

如果說 babel api 是術，那么基于 babel 學到的編譯原理、工具鏈實現思路就是道了。掌握了 babel、掌握了工具鏈，入門編譯原理，絕對能讓你提升一個段位。