你不知道的 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、掌握了工具鏈，入門編譯原理，絕對能讓你提升一個段位。