成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

babel的初步了解

_Dreams / 448人閱讀

摘要：表示的是在嚴格模式下解析并且允許模塊定義即能識別和語法識別不了。

前段時間開始研究ast，然后慢慢的順便把babel都研究了，至于ast稍后的時間會寫一篇介紹性博客專門介紹ast，本博客先介紹一下babel的基本知識點。

背景：

由于現(xiàn)在前端出現(xiàn)了很多非es5的語法，如jsx，.vue，ts等等的格式和寫法，如果要在瀏覽器的設備上識別并執(zhí)行，需要額外將這些非傳統(tǒng)格式的語法轉(zhuǎn)成傳統(tǒng)的es5格式，而babel插件，就是用來將非es5格式的語法轉(zhuǎn)成es5語法。

babel其實是一個解釋器，它主要講進行中的代碼分為三個階段執(zhí)行：解釋，轉(zhuǎn)換，生成。其中babel插件或者其他插件都是在轉(zhuǎn)換階段起作用。

babel核心包：

babel既然是個解釋器，那么就會擁有解釋，遍歷，以及生成的一系列工具和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表示的是在嚴格模式下解析并且允許模塊定義（即能識別import和expor語法）；script識別不了。

2）babel-traverse：功能就像estraverse一樣，主要是給plugin提供遍歷ast節(jié)點的功能；

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工具包：

要完成復雜的轉(zhuǎn)換工作，單靠核心包是不能完成的，所以必要還要依賴于其他工具包輔助。

1）babel-types：包含著ast中的所有類型，可以生成一個ast的節(jié)點，然后替換真是ast的節(jié)點，從而改變ast的內(nèi)容（ast工具庫，類似于lodash，具有校驗，創(chuàng)建和轉(zhuǎn)換ast的方法）。

import * as t from "babel-types";

console.log(t.stringLiteral("my-module"));

語法：t.anyTypeAnnotation(內(nèi)容) // 最終返回一個類型的對象

2）babel-template：可以通過字符串的形式生成一個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: 主要是用來將錯誤信息打印出來;

5）babel-cli：babel的命令行工具，通過命令行對js代碼進行轉(zhuǎn)譯;

6）babel-register: 因為babel工具文件，插件里面使用了很多require，而 該文件可以將node中的require于babel中的require綁定，從而可以使用require引入文件；

7）babel-plugin-xxx: 在轉(zhuǎn)換過程中使用的插件；

8）babel-plugin-transform-xxx: 在transerform過程中使用到的插件；

(.babelrc文件：該文件會在babel編譯過程中，自動配置babel的參數(shù)，babel的運行環(huán)境--env，babel的設置---preset，babel的所需要用到的插件---plugins等)

9）babel-core：該核心包包含著babel的核心（babel-lon，babel-traverse,babel-generate），提供了更多更友善的api給開發(fā)者使用。

babel編譯原理：

編譯器就是講高級的語言或者語法，編譯成更進階機器識別的語言和語法；

babel其實更像一個轉(zhuǎn)譯器，因為它主要是將高級的js語法轉(zhuǎn)成低級的語法；

他們兩者雖然有區(qū)別，但有很多相似之處（都是經(jīng)歷三個過程：解析，處理，生成）；

以es6轉(zhuǎn)成es5為例：

ES6代碼輸入 ==》 babylon進行解析 ==》 得到AST ==》 plugin用babel-traverse對AST樹進行遍歷轉(zhuǎn)譯 ==》 得到新的AST樹 ==》 用babel-generator通過AST樹生成ES5代碼

babel-pollfill，babel-runtime,transfer-runtime的區(qū)別：

babel-pollfill是針對于應用和頁面范圍內(nèi)，對新的對象和新的語法進行兼容，主要是通過一些輔助函數(shù)進行兼容新的語法，但如果針對外部的庫使用，就會產(chǎn)生污染全局環(huán)境的影響，一般對項目代碼使用；

babel-runtime是對于外部插件和庫的語法兼容，能將新的對象和語法，通過在運行時，把對應的可識別的語法和對象匹配出來并進行轉(zhuǎn)換，從而顯示在運行時進行語法降級兼容，且不會產(chǎn)生全局污染，一般對外部的插件使用；

transfer-babel是對babel-runtime進行封裝，新的語法，對象能通過該插件，換種形式引用runtime的東西；

（其實runtime，pollfill都是建立在core-js之上的）。

對于babel的插件，主要是因為生成的ast的底層中有一個accept方法，專門用來接收visitor（插件）訪問者對象，然后在visitor中定義各種節(jié)點類型的操作-visite，每個visite都可以接受一個path參數(shù)（節(jié)點信息，節(jié)點和位置信息的對象，其包含很多有用的方法），在visit中處理path，從而實現(xiàn)轉(zhuǎn)換的作用。

const result = babel.transform(code, {
    plugins: [{
        visitor
    }]
})
console.log(result.code)；

至于visitor后續(xù)會詳細介紹。

整個babel的結(jié)構(gòu)圖，我大概花了一張圖表示出來：

而babel和webpack的協(xié)同開發(fā)，我也大概花了一張圖表示他們之間的關(guān)系，但里面的原理，我后續(xù)會再去研究，研究好再分享一下：

以上是我對babel的初步理解，如果有不正確的地方，歡迎指出。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100357.html

相關(guān)文章

  • webpack 項目構(gòu)建：（二）ES6 編譯環(huán)境搭建

    摘要：本質(zhì)就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標代碼的將目標代碼的轉(zhuǎn)換成代碼。項目構(gòu)建三開發(fā)環(huán)境本地服務器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網(wǎng) 注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學實踐過程可能會有些出入。 ??在上一章 webpack 項目構(gòu)建：（一）基本架構(gòu)搭建 我們搭建了一個最基本的 webpack 項目，現(xiàn)...

    marser 評論0 收藏0

  • webpack的Babel加載器

    摘要：的轉(zhuǎn)譯過程分為三個階段。標準為例，提供了如下的一些的只轉(zhuǎn)譯該年份批準的標準，而則代指最新的標準，包括和。未完待續(xù)，繼續(xù)學習繼續(xù)補充哦參考文獻深入理解原理及其使用 Babel Babel的轉(zhuǎn)譯過程分為三個階段: parsing, transforming, generating。babel只是轉(zhuǎn)譯新標準引入的語法，比如ES6的箭頭函數(shù)轉(zhuǎn)譯成ES5的函數(shù)；而新標準引入的原生對象，部分原生對...

    Ali_ 評論0 收藏0

  • ES2015入門系列9-Babel和Rollup

    摘要：雖然夠好用，奈何沒有瀏覽器對其可以完全支持，本文書寫時間，開發(fā)版號稱已經(jīng)支持的特性。開始安裝本系列假定讀者都有使用經(jīng)驗，如果還沒有，趕緊去這里了解并安裝吧。到此，我們的已經(jīng)準備就緒。 通過前面章節(jié)的講解，大家對ES2015的一些新語法有了初步的理解，之前我們的測試代碼都可以直接放入 Chrome Console 中直接運行，為了更好的學習后面的面向?qū)ο蠛湍K開發(fā)，我先用一章介紹一下 B...

    eccozhou 評論0 收藏0

  • 揭秘babel的魔法之class魔法處理

    摘要：年，很多人已經(jīng)開始接觸環(huán)境，并且早已經(jīng)用在了生產(chǎn)當中。我們發(fā)現(xiàn)，關(guān)鍵字會被編譯成構(gòu)造函數(shù)，于是我們便可以通過來實現(xiàn)實例的生成。下一篇文章我會繼續(xù)介紹如何處理子類的并會通過一段函數(shù)橋梁，使得環(huán)境下也能夠繼承定義的。 2017年，很多人已經(jīng)開始接觸ES6環(huán)境，并且早已經(jīng)用在了生產(chǎn)當中。我們知道ES6在大部分瀏覽器還是跑不通的，因此我們使用了偉大的Babel來進行編譯。很多人可能沒有關(guān)心過，...

    wqj97 評論0 收藏0

  • vue2首頁加載慢的問題

    摘要：開發(fā)完了，并部署到服務器后，就遇到了一個非常明顯的問題。所以可以利用按需加載來進一步縮小文件的體積。另外圖片還可以去下面這個網(wǎng)上壓縮一下經(jīng)過上述的幾步，首頁的加載速度已經(jīng)比較快了，項目經(jīng)理也比較滿意。初步結(jié)束了首頁加載慢的問題的研究。 本次開發(fā)的項目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構(gòu)。隨后在項目開發(fā)當中，添加了自己寫的UI組件，和復雜的業(yè)務邏輯。整個項目...

    canopus4u 評論0 收藏0

發(fā)表評論

0條評論

_Dreams

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<