babel相關(guān)總結(jié)

Richard_Gao 發(fā)布于2019-08-22 15:03 / 2872人閱讀

對(duì)babel一直沒具體總結(jié)過，趁周末看了下文檔，記錄一下

babel作為一個(gè)compiler,主要用在轉(zhuǎn)換新的es標(biāo)準(zhǔn)實(shí)現(xiàn)來使所有瀏覽器都支持，這包含兩方面

新的es標(biāo)準(zhǔn)語法，箭頭函數(shù)、擴(kuò)展運(yùn)算符、塊級(jí)作用域等

轉(zhuǎn)化新的es標(biāo)準(zhǔn)方法或正被提議還未納入標(biāo)準(zhǔn)的方法，，Array.from、Map、Promise、String.includes等

babel編譯過程

babel的編譯過程分為三個(gè)階段，解析、轉(zhuǎn)換、生成瀏覽器支持的代碼。官網(wǎng)推薦了一個(gè)the-super-tiny-compiler,描述了類似babel這樣的compiler大體是如何工作的。

解析解析源代碼，構(gòu)造抽象語法樹

轉(zhuǎn)換使用各種plugin處理AST，轉(zhuǎn)換成一個(gè)新的AST

生成代碼根據(jù)新的AST，生成代碼字符串

具體細(xì)節(jié)參見the-super-tiny-compiler

處理新的語法

對(duì)es新增語法的處理是借助babel的各種plugin，各種plugin作用在babel編譯的第二個(gè)階段，轉(zhuǎn)化階段

presets

presets可以看做是一部分plugin的集合，目前官方提供的presets有env、react、flow

在babel還不支持env之前，我們一般在.babelrc中指定

{
    presets:["es2015","es2016","stage-2"]
}

像es2015表示babel會(huì)使用如下這些plugin處理我們代碼中使用的新語法

現(xiàn)在我們可以這樣寫

{
    presets:["env"]
}

等價(jià)于babel-preset-latest，可以轉(zhuǎn)換已經(jīng)在標(biāo)準(zhǔn)中的es6,es7等的新語法，需要注意的是env并不會(huì)處理被提議的stage-x中的新語法，要使用那些語法要自己在presets中執(zhí)行stage-x

并且只是指定env，而不指定相關(guān)的targets信息的話，babel只會(huì)轉(zhuǎn)換新語法，對(duì)新方法不會(huì)做處理

處理新的方法 babel-polyfill

為了支持es新增api的轉(zhuǎn)化，我們可以使用babel-polyfill,這個(gè)庫內(nèi)部使用core-js(那個(gè)作者打廣告說正在找工作的庫)和regenerator來模擬實(shí)現(xiàn)新增api.

使用polyfill的缺點(diǎn)

polyfill需要首先被引入，在文件首部或者webpack中entry: ["babel-polyfill", "./app/js"],整個(gè)文件會(huì)和我們src下的代碼打包在一起，增大文件大小

polyfill會(huì)在js內(nèi)置對(duì)象的原型上增加方法，例如String.prototpe.includes，污染全局作用域

一個(gè)減小使用polyfill后打包代碼過大問題的方法 useBuiltIns=true

useBuiltIns默認(rèn)不開啟，開啟后，我們import "babel-polyfill"會(huì)根據(jù)當(dāng)前targets指定的環(huán)境引入必須的文件

import "babel-polyfill";

輸出:根據(jù)環(huán)境

import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";
import "core-js/modules/web.timers";
import "core-js/modules/web.immediate";
import "core-js/modules/web.dom.iterable";

一定程度上減小打包文件大小

transform-runtime

使用babel-polyfill會(huì)有使打包文件過大和污染全局作用域的問題，所以babel提供了babel-plugin-transform-runtime來解決一些問題

優(yōu)化幫助函數(shù)引用

babel內(nèi)部提供了很多幫助函數(shù)來處理語法轉(zhuǎn)化的需要，transform-runtime會(huì)把對(duì)幫助函數(shù)的調(diào)用替換為對(duì)模塊的引用

class Person {
}

輸出：

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function Person() {
  _classCallCheck(this, Person);
};

_classCallCheck是一個(gè)幫助函數(shù)，如果我們多個(gè)js文件中都有定義class類，_classCallCheck就會(huì)在多個(gè)文件中都存在,造成幫助函數(shù)重復(fù)，增大打包文件大小。而transform-runtime會(huì)將幫助函數(shù)以引用的方式調(diào)用(引用babel-runtime/helpers/xxx下面的)，避免重復(fù)

對(duì)于新增api的轉(zhuǎn)化，transform-runtime使用babel-runtime/core-js下對(duì)應(yīng)的同名方法,而不需要引用babel-polyfill,只會(huì)需要哪個(gè)，就require哪個(gè)core-js下對(duì)應(yīng)的實(shí)現(xiàn).避免污染全局作用域

transform-runtime的缺點(diǎn)

因?yàn)椴粫?huì)在js原生對(duì)象原型上添加方法,所以transform-runtime不會(huì)轉(zhuǎn)化新增的實(shí)例方法，例如不能處理"foobar".includes("foo")

對(duì)于新增api如何處理

如果項(xiàng)目中使用了大量新增api，并使用大量新增的實(shí)例方法，應(yīng)該使用polyfill，為了一定程度上減小打包文件的體積，應(yīng)該啟用useBuiltIns=true，并指定代碼的最低運(yùn)行環(huán)境，盡量減少不必要的polyfill，同時(shí)加入transform-runtime，設(shè)置polyfill=false

{
    "presets":[
        ["env",{
            "targets":{
                "browsers": [
                    "last 2 versions",//各個(gè)瀏覽器的最新兩個(gè)版本
                    "safari >= 7"
                ]
            },
            "debug": true,
            "useBuiltIns": true
        }]
    ],
    "plugins":[
        ["transform-runtime", { //不處理新的方法，只處理幫助函數(shù)
            "helpers": true,
            "polyfill": false,
            "regenerator": false,
            "moduleName": "babel-runtime"
        }]
    ]
}

如果項(xiàng)目并不使用新增實(shí)例方法(很少這樣的情況),并不想污染全局作用域，應(yīng)該使用transform-runtime

{
    "presets":["env"],//處理新的語法，但新的方法由transform-runtime插件處理
    "plugins":[
        ["transform-runtime", {
            "helpers": true,
            "polyfill": true,
            "regenerator": true,
            "moduleName": "babel-runtime"
        }]
    ]
}

原文地址

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93130.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Richard_Gao

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于javaweb+jsp的酒店管理系統(tǒng)

閱讀 3071·2021-11-23 09:51
分享幾個(gè)YYDS的Pycharm插件

閱讀 2915·2021-11-11 16:55
python實(shí)現(xiàn)——處理Excel表格（超詳細(xì)）

閱讀 3017·2021-10-14 09:43
蘋果全體員工大會(huì)信息泄密給媒體，庫克表示將全力追查

閱讀 1462·2021-09-23 11:22
Vue Router history模式的配置方法及其原理

閱讀 1101·2019-08-30 11:04
深入理解 flex-grow & flex-shrink & flex-basis

閱讀 1786·2019-08-29 11:10
log4j日志級(jí)別

閱讀 1020·2019-08-27 10:56
前端報(bào)表數(shù)據(jù)處理【去重、行轉(zhuǎn)列、交叉、聚合】

閱讀 3208·2019-08-26 12:01

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

babel相關(guān)總結(jié)

相關(guān)文章

***babel歸納總結(jié)***

提高代碼質(zhì)量——使用Jest和Sinon給已有的代碼添加單元測(cè)試

利用vscode調(diào)試nodejs代碼實(shí)踐總結(jié)

用 ES6 編寫 Webpack 的配置文件

我的es6總結(jié)

發(fā)表評(píng)論

0條評(píng)論

Richard_Gao

男|高級(jí)講師

TA的文章

基于javaweb+jsp的酒店管理系統(tǒng)

分享幾個(gè)YYDS的Pycharm插件

python實(shí)現(xiàn)——處理Excel表格（超詳細(xì)）

蘋果全體員工大會(huì)信息泄密給媒體，庫克表示將全力追查

Vue Router history模式的配置方法及其原理

深入理解 flex-grow & flex-shrink & flex-basis

log4j日志級(jí)別

前端報(bào)表數(shù)據(jù)處理【去重、行轉(zhuǎn)列、交叉、聚合】

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

babel相關(guān)總結(jié)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！