建站
咨詢
售后
建站咨詢
新聞中心
你不知道的 babel
提到 babel，你會(huì)想到什么？
10年積累的成都做網(wǎng)站、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有石河子免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
-
可以把項(xiàng)目中的 es6、es7 等代碼轉(zhuǎn)成目標(biāo)環(huán)境支持的代碼
-
可以自動(dòng) polyfill 目標(biāo)環(huán)境不支持的 api
-
taro （小程序轉(zhuǎn)譯工具）是基于 babel 實(shí)現(xiàn)的
-
babel 的插件很豐富
-
我們公司現(xiàn)在用 babel 來(lái)編譯 typescript，不用 tsc 了
-
我基于 babel 做過(guò)自動(dòng)埋點(diǎn)的功能，得到了領(lǐng)導(dǎo)的夸獎(jiǎng)
-
...
其實(shí) babel 能做的不只是這些，它能做 3 類事情：
轉(zhuǎn)譯 esnext、typescript、flow 等到目標(biāo)環(huán)境支持的 js
這個(gè)是最常用的功能，用來(lái)把代碼中的 esnext 的新的語(yǔ)法、typescript 和 flow 的語(yǔ)法轉(zhuǎn)成基于目標(biāo)環(huán)境支持的語(yǔ)法的實(shí)現(xiàn)。并且還可以把目標(biāo)環(huán)境不支持的 api 進(jìn)行 polyfill。
babel7 支持了 preset-env，可以指定 targets 來(lái)進(jìn)行按需轉(zhuǎn)換，轉(zhuǎn)換更加的精準(zhǔn)，產(chǎn)物更小。
一些特定用途的代碼轉(zhuǎn)換
babel 是一個(gè)轉(zhuǎn)譯器，暴露了很多 api，用這些 api 可以完成代碼到 AST 的 parse，AST 的轉(zhuǎn)換，以及目標(biāo)代碼的生成。
開(kāi)發(fā)者可以用它來(lái)來(lái)完成一些特定用途的轉(zhuǎn)換，比如函數(shù)插樁（函數(shù)中自動(dòng)插入一些代碼，例如埋點(diǎn)代碼）、自動(dòng)國(guó)際化、default import 轉(zhuǎn) named import 等。
現(xiàn)在比較流行的小程序轉(zhuǎn)譯工具 taro，就是基于 babel 的 api 來(lái)實(shí)現(xiàn)的。
代碼的靜態(tài)分析
對(duì)代碼進(jìn)行 parse 之后，能夠進(jìn)行轉(zhuǎn)換，是因?yàn)橥ㄟ^(guò) AST 的結(jié)構(gòu)能夠理解代碼。理解了代碼之后，除了進(jìn)行轉(zhuǎn)換然后生成目標(biāo)代碼之外，也同樣可以用于分析代碼的信息，進(jìn)行一些檢查。
babel 還能做什么？
babel 是前端業(yè)務(wù)開(kāi)發(fā)和工具鏈開(kāi)發(fā)中必不可少的工具，我們每天都在用，可是你有想過(guò)這些問(wèn)題么：
-
怎么寫(xiě)一個(gè) babel 插件來(lái)做自定義的代碼轉(zhuǎn)換？
-
業(yè)務(wù)開(kāi)發(fā)中有哪些地方可以用 babel 來(lái)做自動(dòng)化？
-
babel 是怎么實(shí)現(xiàn)的？
還有
-
linter 是怎么實(shí)現(xiàn)的？
-
typescript 類型檢查是怎么實(shí)現(xiàn)的？
-
壓縮混淆工具的原理是什么？
-
打包工具是如何分析代碼依賴關(guān)系的？
-
api 文檔如何自動(dòng)生成？
上面這些都可以用 babel 來(lái)實(shí)現(xiàn)，或許你并沒(méi)有想過(guò) babel 有這么大的能量， 學(xué)會(huì)了 babel，絕對(duì)能讓你提升一個(gè)段位 。
基于 babel 實(shí)現(xiàn)完整工具鏈
我們來(lái)理一下這些工具的實(shí)現(xiàn)思路（所有下面列的工具都有實(shí)現(xiàn)代碼放在 github）
自動(dòng)國(guó)際化
國(guó)際化是把寫(xiě)死的字符串字面量換成從資源包取值的方式，babel 可以分析出代碼中的字符串字面量，把它替換成一個(gè)函數(shù)調(diào)用語(yǔ)句，然后自動(dòng)引入資源包。基于 babel，我們完全可以做到自動(dòng)國(guó)際化。
自動(dòng)生成 api 文檔
我們?cè)趯?xiě) api 的時(shí)候，會(huì)在上方添加注釋，那么是不是能把這些注釋內(nèi)容還有關(guān)聯(lián)的函數(shù)、class 的信息提取出來(lái)，用一定的模版來(lái)生成 api 文檔呢？沒(méi)錯(cuò)，babel 可以做到。
linter
我們整天用 eslint、stylelint 來(lái)做代碼規(guī)范的檢查，其實(shí)他們不過(guò)就是對(duì) AST 做了校驗(yàn)，這些我們用 babel 完全可以做到。可以基于 babel 實(shí)現(xiàn) eslint。
type checker
typescript 是給代碼添加了靜態(tài)的類型信息，可以在編譯期間進(jìn)行類型檢查，也可以輔助做代碼的智能提示，現(xiàn)在基本是前端必備技能了?？墒悄阌邢脒^(guò) typescript 怎么實(shí)現(xiàn)的么？在小冊(cè)中 我們會(huì)手寫(xiě)一個(gè) ts type checker，讓你真正理解 typescript！
壓縮混淆
前端代碼上生產(chǎn)肯定要做壓縮，做混淆，這個(gè)我們整天都在用，可是你知道他的實(shí)現(xiàn)原理么，我們能不能用 babel 來(lái)實(shí)現(xiàn)一下。答案是肯定的，在小冊(cè)中 我們會(huì)實(shí)現(xiàn)壓縮混淆的功能 。
js 解釋器
v8 引擎的實(shí)現(xiàn)原理是什么，解釋型語(yǔ)言都是怎么解釋代碼的。我們能不能實(shí)現(xiàn)一個(gè) js 解釋器，是可以的，《babel 插件通關(guān)秘籍》小冊(cè)中我們會(huì)基于 babel parser 實(shí)現(xiàn)一個(gè) js 解釋器。
手寫(xiě) babel
可能你會(huì)問(wèn)，上面的這些都是基于 babel，那如果沒(méi)有 babel 呢？
沒(méi)有 babel 我們就實(shí)現(xiàn)一個(gè) babel，小冊(cè)最后 我們會(huì)實(shí)現(xiàn)一個(gè)簡(jiǎn)易但可用的 babel，讓你真正理解 babel 的原理，真正掌握 babel 。
上面的解釋器和類型檢查的內(nèi)容，王垠賣 12000，見(jiàn)下圖，所以這本小冊(cè)絕對(duì)超值。
大綱
上面說(shuō)了很多小冊(cè)的內(nèi)容，下面是小冊(cè)的完整目錄：
不只是 babel
雖然上面的實(shí)戰(zhàn)都是基于 babel 的，可是你學(xué)到的只是 babel 么？
不是的，上面的實(shí)戰(zhàn)案例涉及到完整的工具鏈，從文檔生成、lint、type check、壓縮混淆到 js 解釋器等等，這幾乎是前端開(kāi)發(fā)的閉環(huán)了。 以此為抓手，學(xué)到的是整條工具鏈的實(shí)現(xiàn)思路 。
上面的工具還是集中在前端領(lǐng)域，但其中轉(zhuǎn)譯器、解釋器的實(shí)現(xiàn)思路確是通用的，編譯原理主要就是學(xué)編譯器、轉(zhuǎn)譯器、解釋器三部分， 學(xué)完整本小冊(cè)，相信也能幫助你入門編譯原理 。
總結(jié)
babel 是前端領(lǐng)域幾乎是必備的工具，基于它可以完成很多功能，甚至是打造整條工具鏈，我們?cè)谛?cè)中會(huì)實(shí)現(xiàn) linter、type cheker、壓縮混淆、api 文檔自動(dòng)生成、js 解釋器等等一系列功能。其中解釋器和類型檢查的功能在王垠那里能賣 12000，對(duì)比之下，這本小冊(cè)內(nèi)容和價(jià)格絕對(duì)很良心了。
如果說(shuō) babel api 是術(shù)，那么基于 babel 學(xué)到的編譯原理、工具鏈實(shí)現(xiàn)思路就是道了。掌握了 babel、掌握了工具鏈，入門編譯原理，絕對(duì)能讓你提升一個(gè)段位。
分享文章：給我一個(gè)babel，還你一條完整前端工具鏈
鏈接地址：http://www.5511xx.com/article/dhpdjeh.html
