資訊專欄INFORMATION COLUMN
摘要：表示的是在嚴(yán)格模式下解析并且允許模塊定義即能識(shí)別和語法識(shí)別不了。
前段時(shí)間開始研究ast，然后慢慢的順便把babel都研究了，至于ast稍后的時(shí)間會(huì)寫一篇介紹性博客專門介紹ast，本博客先介紹一下babel的基本知識(shí)點(diǎn)。
背景：
由于現(xiàn)在前端出現(xiàn)了很多非es5的語法，如jsx，.vue，ts等等的格式和寫法，如果要在瀏覽器的設(shè)備上識(shí)別并執(zhí)行，需要額外將這些非傳統(tǒng)格式的語法轉(zhuǎn)成傳統(tǒng)的es5格式，而babel插件，就是用來將非es5格式的語法轉(zhuǎn)成es5語法。
babel其實(shí)是一個(gè)解釋器，它主要講進(jìn)行中的代碼分為三個(gè)階段執(zhí)行：解釋，轉(zhuǎn)換，生成。其中babel插件或者其他插件都是在轉(zhuǎn)換階段起作用。
babel核心包：
babel既然是個(gè)解釋器，那么就會(huì)擁有解釋，遍歷，以及生成的一系列工具和api：
1）babylon：babel里面用來將js代碼詞法分析，生成ast，他的結(jié)構(gòu)有些像acron，它的返回的結(jié)構(gòu)里面包含著ast和tokens。
require("babylon").parse("code", {
// parse in strict mode and allow module declarations
sourceType: "module",
plugins: [
// enable jsx and flow syntax
"jsx",
"flow"
]
});
sourceType: module表示的是在嚴(yán)格模式下解析并且允許模塊定義（即能識(shí)別import和expor語法）；script識(shí)別不了。
2）babel-traverse：功能就像estraverse一樣，主要是給plugin提供遍歷ast節(jié)點(diǎn)的功能；
var babylon = require("babylon");
var result = babylon.parse(code, { sourceType: "module",});
console.log("result:", result);
import traverse from "babel-traverse";
traverse(result, {
enter(node) {
console.log(node);
}
});
3）babel-generator：將ast生成js代碼；
var babylon = require("babylon");
var result = babylon.parse(code, { sourceType: "module",});
console.log("result:", result);
import traverse from "babel-traverse";
import generate from "babel-generator";
traverse(result, {
enter(node) {
console.log(node);
}
});
var conde1 = generate(result);
console.log("generate:", conde1);
babel工具包：
要完成復(fù)雜的轉(zhuǎn)換工作，單靠核心包是不能完成的，所以必要還要依賴于其他工具包輔助。
1）babel-types：包含著ast中的所有類型，可以生成一個(gè)ast的節(jié)點(diǎn)，然后替換真是ast的節(jié)點(diǎn)，從而改變ast的內(nèi)容（ast工具庫(kù)，類似于lodash，具有校驗(yàn)，創(chuàng)建和轉(zhuǎn)換ast的方法）。
import * as t from "babel-types";
console.log(t.stringLiteral("my-module"));
語法：t.anyTypeAnnotation(內(nèi)容) // 最終返回一個(gè)類型的對(duì)象
2）babel-template：可以通過字符串的形式生成一個(gè)ast；
import template from "babel-template";
const buildRequire = template(`
var IMPORT_NAME = require(SOURCE);
`);
const ast2 = buildRequire({
IMPORT_NAME: t.identifier("myModule"),
SOURCE: t.stringLiteral("my-module")
});
console.log("ast2", ast2);
3）babel-helps: 主要是用來協(xié)助babel轉(zhuǎn)換；
4）babel-core-frame: 主要是用來將錯(cuò)誤信息打印出來;
5）babel-cli：babel的命令行工具，通過命令行對(duì)js代碼進(jìn)行轉(zhuǎn)譯;
6）babel-register: 因?yàn)閎abel工具文件，插件里面使用了很多require，而 該文件可以將node中的require于babel中的require綁定，從而可以使用require引入文件；
7）babel-plugin-xxx: 在轉(zhuǎn)換過程中使用的插件；
8）babel-plugin-transform-xxx: 在transerform過程中使用到的插件；
(.babelrc文件：該文件會(huì)在babel編譯過程中，自動(dòng)配置babel的參數(shù)，babel的運(yùn)行環(huán)境--env，babel的設(shè)置---preset，babel的所需要用到的插件---plugins等)
9）babel-core：該核心包包含著babel的核心（babel-lon，babel-traverse,babel-generate），提供了更多更友善的api給開發(fā)者使用。
babel編譯原理：
編譯器就是講高級(jí)的語言或者語法，編譯成更進(jìn)階機(jī)器識(shí)別的語言和語法；
babel其實(shí)更像一個(gè)轉(zhuǎn)譯器，因?yàn)樗饕菍⒏呒?jí)的js語法轉(zhuǎn)成低級(jí)的語法；
他們兩者雖然有區(qū)別，但有很多相似之處（都是經(jīng)歷三個(gè)過程：解析，處理，生成）；
以es6轉(zhuǎn)成es5為例：
ES6代碼輸入 ==》 babylon進(jìn)行解析 ==》 得到AST ==》 plugin用babel-traverse對(duì)AST樹進(jìn)行遍歷轉(zhuǎn)譯 ==》 得到新的AST樹 ==》 用babel-generator通過AST樹生成ES5代碼
babel-pollfill，babel-runtime,transfer-runtime的區(qū)別：
babel-pollfill是針對(duì)于應(yīng)用和頁面范圍內(nèi)，對(duì)新的對(duì)象和新的語法進(jìn)行兼容，主要是通過一些輔助函數(shù)進(jìn)行兼容新的語法，但如果針對(duì)外部的庫(kù)使用，就會(huì)產(chǎn)生污染全局環(huán)境的影響，一般對(duì)項(xiàng)目代碼使用；
babel-runtime是對(duì)于外部插件和庫(kù)的語法兼容，能將新的對(duì)象和語法，通過在運(yùn)行時(shí)，把對(duì)應(yīng)的可識(shí)別的語法和對(duì)象匹配出來并進(jìn)行轉(zhuǎn)換，從而顯示在運(yùn)行時(shí)進(jìn)行語法降級(jí)兼容，且不會(huì)產(chǎn)生全局污染，一般對(duì)外部的插件使用；
transfer-babel是對(duì)babel-runtime進(jìn)行封裝，新的語法，對(duì)象能通過該插件，換種形式引用runtime的東西；
（其實(shí)runtime，pollfill都是建立在core-js之上的）。
對(duì)于babel的插件，主要是因?yàn)樯傻腶st的底層中有一個(gè)accept方法，專門用來接收visitor（插件）訪問者對(duì)象，然后在visitor中定義各種節(jié)點(diǎn)類型的操作-visite，每個(gè)visite都可以接受一個(gè)path參數(shù)（節(jié)點(diǎn)信息，節(jié)點(diǎn)和位置信息的對(duì)象，其包含很多有用的方法），在visit中處理path，從而實(shí)現(xiàn)轉(zhuǎn)換的作用。
const result = babel.transform(code, {
plugins: [{
visitor
}]
})
console.log(result.code)；
至于visitor后續(xù)會(huì)詳細(xì)介紹。
整個(gè)babel的結(jié)構(gòu)圖，我大概花了一張圖表示出來：
而babel和webpack的協(xié)同開發(fā)，我也大概花了一張圖表示他們之間的關(guān)系，但里面的原理，我后續(xù)會(huì)再去研究，研究好再分享一下：
以上是我對(duì)babel的初步理解，如果有不正確的地方，歡迎指出。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/100357.html
摘要：本質(zhì)就是一個(gè)編譯器，通過將源代碼解析成抽象語法樹將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的將目標(biāo)代碼的轉(zhuǎn)換成代碼。項(xiàng)目構(gòu)建三開發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網(wǎng) 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過程可能會(huì)有些出入。 ??在上一章 webpack 項(xiàng)目構(gòu)建：（一）基本架構(gòu)搭建 我們搭建了一個(gè)最基本的 webpack 項(xiàng)目，現(xiàn)...
摘要：的轉(zhuǎn)譯過程分為三個(gè)階段。標(biāo)準(zhǔn)為例，提供了如下的一些的只轉(zhuǎn)譯該年份批準(zhǔn)的標(biāo)準(zhǔn)，而則代指最新的標(biāo)準(zhǔn)，包括和。未完待續(xù)，繼續(xù)學(xué)習(xí)繼續(xù)補(bǔ)充哦參考文獻(xiàn)深入理解原理及其使用 Babel Babel的轉(zhuǎn)譯過程分為三個(gè)階段: parsing, transforming, generating。babel只是轉(zhuǎn)譯新標(biāo)準(zhǔn)引入的語法，比如ES6的箭頭函數(shù)轉(zhuǎn)譯成ES5的函數(shù)；而新標(biāo)準(zhǔn)引入的原生對(duì)象，部分原生對(duì)...
摘要：雖然夠好用，奈何沒有瀏覽器對(duì)其可以完全支持，本文書寫時(shí)間，開發(fā)版號(hào)稱已經(jīng)支持的特性。開始安裝本系列假定讀者都有使用經(jīng)驗(yàn)，如果還沒有，趕緊去這里了解并安裝吧。到此，我們的已經(jīng)準(zhǔn)備就緒。 通過前面章節(jié)的講解，大家對(duì)ES2015的一些新語法有了初步的理解，之前我們的測(cè)試代碼都可以直接放入 Chrome Console 中直接運(yùn)行，為了更好的學(xué)習(xí)后面的面向?qū)ο蠛湍K開發(fā)，我先用一章介紹一下 B...
摘要：年，很多人已經(jīng)開始接觸環(huán)境，并且早已經(jīng)用在了生產(chǎn)當(dāng)中。我們發(fā)現(xiàn)，關(guān)鍵字會(huì)被編譯成構(gòu)造函數(shù)，于是我們便可以通過來實(shí)現(xiàn)實(shí)例的生成。下一篇文章我會(huì)繼續(xù)介紹如何處理子類的并會(huì)通過一段函數(shù)橋梁，使得環(huán)境下也能夠繼承定義的。 2017年，很多人已經(jīng)開始接觸ES6環(huán)境，并且早已經(jīng)用在了生產(chǎn)當(dāng)中。我們知道ES6在大部分瀏覽器還是跑不通的，因此我們使用了偉大的Babel來進(jìn)行編譯。很多人可能沒有關(guān)心過，...
摘要：開發(fā)完了，并部署到服務(wù)器后，就遇到了一個(gè)非常明顯的問題。所以可以利用按需加載來進(jìn)一步縮小文件的體積。另外圖片還可以去下面這個(gè)網(wǎng)上壓縮一下經(jīng)過上述的幾步，首頁的加載速度已經(jīng)比較快了，項(xiàng)目經(jīng)理也比較滿意。初步結(jié)束了首頁加載慢的問題的研究。 本次開發(fā)的項(xiàng)目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構(gòu)。隨后在項(xiàng)目開發(fā)當(dāng)中，添加了自己寫的UI組件，和復(fù)雜的業(yè)務(wù)邏輯。整個(gè)項(xiàng)目...
閱讀 3479·2021-11-12 10:36
閱讀 2827·2021-11-11 16:55
閱讀 3053·2021-09-27 13:36
閱讀 1679·2021-08-05 10:01
閱讀 3633·2019-08-30 15:55
閱讀 842·2019-08-30 13:01
閱讀 1965·2019-08-29 17:16
閱讀 2429·2019-08-29 16:40
