你不知道的 babel

提到 babel，你會想到什么？

• 可以把項目中的 es6、es7 等代碼轉(zhuǎn)成目標(biāo)環(huán)境支持的代碼

• 可以自動 polyfill 目標(biāo)環(huán)境不支持的 api

• taro （小程序轉(zhuǎn)譯工具）是基于 babel 實現(xiàn)的

• babel 的插件很豐富

• 我們公司現(xiàn)在用 babel 來編譯 typescript，不用 tsc 了

• 我基于 babel 做過自動埋點的功能，得到了領(lǐng)導(dǎo)的夸獎

• ...

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

轉(zhuǎn)譯 esnext、typescript、flow 等到目標(biāo)環(huán)境支持的 js

這個是最常用的功能，用來把代碼中的 esnext 的新的語法、typescript 和 flow 的語法轉(zhuǎn)成基于目標(biāo)環(huán)境支持的語法的實現(xiàn)。并且還可以把目標(biāo)環(huán)境不支持的 api 進行 polyfill。

babel7 支持了 preset-env，可以指定 targets 來進行按需轉(zhuǎn)換，轉(zhuǎn)換更加的精準(zhǔn)，產(chǎn)物更小。

一些特定用途的代碼轉(zhuǎn)換

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

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

現(xiàn)在比較流行的小程序轉(zhuǎn)譯工具 taro，就是基于 babel 的 api 來實現(xiàn)的。

代碼的靜態(tài)分析

對代碼進行 parse 之后，能夠進行轉(zhuǎn)換，是因為通過 AST 的結(jié)構(gòu)能夠理解代碼。理解了代碼之后，除了進行轉(zhuǎn)換然后生成目標(biāo)代碼之外，也同樣可以用于分析代碼的信息，進行一些檢查。

babel 還能做什么？

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

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

• 業(yè)務(wù)開發(fā)中有哪些地方可以用 babel 來做自動化？

• babel 是怎么實現(xiàn)的？

還有

• linter 是怎么實現(xiàn)的？

• typescript 類型檢查是怎么實現(xiàn)的？

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

• 打包工具是如何分析代碼依賴關(guān)系的？

• api 文檔如何自動生成？

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

基于 babel 實現(xiàn)完整工具鏈

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

自動國際化

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

自動生成 api 文檔

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

linter

我們整天用 eslint、stylelint 來做代碼規(guī)范的檢查，其實他們不過就是對 AST 做了校驗，這些我們用 babel 完全可以做到?？梢曰?babel 實現(xiàn) eslint。

type checker

typescript 是給代碼添加了靜態(tài)的類型信息，可以在編譯期間進行類型檢查，也可以輔助做代碼的智能提示，現(xiàn)在基本是前端必備技能了?？墒悄阌邢脒^ typescript 怎么實現(xiàn)的么？在小冊中 我們會手寫一個 ts type checker，讓你真正理解 typescript！

壓縮混淆

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

js 解釋器

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

手寫 babel

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

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

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

大綱

上面說了很多小冊的內(nèi)容，下面是小冊的完整目錄：

不只是 babel

雖然上面的實戰(zhàn)都是基于 babel 的，可是你學(xué)到的只是 babel 么？

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

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

總結(jié)

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

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