資訊專欄INFORMATION COLUMN
摘要：的轉(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)引入的語(yǔ)法，比如ES6的箭頭函數(shù)轉(zhuǎn)譯成ES5的函數(shù)；而新標(biāo)準(zhǔn)引入的原生對(duì)象，部分原生對(duì)象新增的原型方法，新增API等(如Proxy, Set等)，這些babel是不會(huì)轉(zhuǎn)譯的，需要用戶自行引用polyfill來解決。
Babel轉(zhuǎn)譯過程：
解析parsing：將代碼字符串解析成抽象語(yǔ)法樹
變換transforming：對(duì)抽象語(yǔ)法樹進(jìn)行轉(zhuǎn)換操作
生成generating：根據(jù)變換后的抽象語(yǔ)法樹再生成代碼字符串
插件應(yīng)用于babel的轉(zhuǎn)譯過程，尤其是第二階段transforming，如果這個(gè)階段不使用任何插件的話，babel會(huì)原樣輸出代碼。我們主要關(guān)注第二階段使用的插件，因?yàn)?b>tranform插件會(huì)自動(dòng)使用對(duì)應(yīng)的詞法插件，所以parsing階段的插件不需要配置
presets預(yù)設(shè)為了減少配置轉(zhuǎn)譯過程中使用的各類插件的麻煩，babel官方做了一些預(yù)設(shè)的插件集。
JS標(biāo)準(zhǔn)為例，babel提供了如下的一些preset:
es2015, es2016, es2017, env
es20xx的preset只轉(zhuǎn)譯該年份批準(zhǔn)的標(biāo)準(zhǔn)，而env則代指最新的標(biāo)準(zhǔn)，包括lastest和es20xx。
另外，stage-0到stage-4的標(biāo)準(zhǔn)成型之前的各個(gè)階段，實(shí)驗(yàn)版的presets
stage-0: 稻草人，只是一個(gè)想法，可能是babel插件
stage-1: 提案，初步嘗試
stage-2: 初稿，完成初步規(guī)范
stage-3: 候選，完成規(guī)范和初步的瀏覽器實(shí)現(xiàn)
stage-4: 完成，將被添加到下一年度發(fā)布
用來處理ES6語(yǔ)法，將其編譯成瀏覽器可以執(zhí)行的js語(yǔ)法。
module.exports = {
...
module: {
rules: [{
test: /.jsx$/
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],//presets設(shè)置的就是當(dāng)前js版本
plugins: [require("@babel/plugin-transform-object-rest-spread")]//需要的插件
}
}
}]
}
};
options屬性來給loader傳遞選項(xiàng)
babel-poyfillpolyfill會(huì)把ES2015+環(huán)境整體引入代碼環(huán)境中，讓你的代碼可以直接使用新標(biāo)準(zhǔn)所引入的新原生對(duì)象。
要確保在入口處導(dǎo)入polyfill，因?yàn)?b>polyfill代碼需要在所有代碼前先被調(diào)用
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
babel-plugin-transform-runtime
babel-plugin-transform-runtime插件依賴babel-runtime, babel-plugin-transform-runtime插件是把js代碼中使用的新原生對(duì)象和靜態(tài)方法轉(zhuǎn)換成對(duì)babel-runtime包的引用。
未完待續(xù)，繼續(xù)學(xué)習(xí)繼續(xù)補(bǔ)充哦~
參考文獻(xiàn)
【JavaScript】深入理解Babel原理及其使用
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97642.html
摘要：通用封裝簡(jiǎn)化配置現(xiàn)在，基本上前端的項(xiàng)目打包都會(huì)用上，因?yàn)樘峁┝藷o與倫比強(qiáng)大的功能和生態(tài)。簡(jiǎn)化配置的一種方式是使用社區(qū)封裝好的庫(kù)，比如。封裝了的一些基礎(chǔ)配置，然后暴露一些額外配置的接口，并附加本地?cái)?shù)據(jù)模擬功能，詳情可以參考主頁(yè)。 通用、封裝、簡(jiǎn)化 webpack 配置 現(xiàn)在，基本上前端的項(xiàng)目打包都會(huì)用上 webpack，因?yàn)?webpack 提供了無與倫比強(qiáng)大的功能和生態(tài)。但在創(chuàng)建一個(gè)項(xiàng)...
摘要：簡(jiǎn)介來構(gòu)建用戶界面的庫(kù)，不是框架關(guān)注于層虛擬單向數(shù)據(jù)流這些概念如何使用下載文件也可以使用，需要用到的模塊介紹是編寫組件的一種語(yǔ)法規(guī)范，可以看為是的擴(kuò)展，它支持將和混寫在一起，最后使用編譯為常規(guī)的，方便瀏覽器解析編寫第一個(gè)例子使用編寫組件 react簡(jiǎn)介 來構(gòu)建用戶界面的庫(kù)，不是框架 關(guān)注于view層 虛擬DOM 單向數(shù)據(jù)流 JSX這些概念 如何使用react 下載文件 rea...
摘要：我們也可以不用在命令行里面輸入，因?yàn)槲覀兛赡芤院髸?huì)查詢更多東西，因此我們可以，在的里面加入這里的和只是為了輸出進(jìn)度條和，沒有實(shí)際意義，然后在命令行輸入就可以默認(rèn)使用進(jìn)行打包了。更具體的就請(qǐng)查看一下官方文檔了，畢竟篇幅不能太長(zhǎng)。 Webpack 網(wǎng)上有很多webpack的介紹，也有不少的視頻，但是不少人看到應(yīng)該還是不是很了解webpack里面到底是講什么，而且報(bào)錯(cuò)了之后也是不知所措 那么...
摘要：我們也可以不用在命令行里面輸入，因?yàn)槲覀兛赡芤院髸?huì)查詢更多東西，因此我們可以，在的里面加入這里的和只是為了輸出進(jìn)度條和，沒有實(shí)際意義，然后在命令行輸入就可以默認(rèn)使用進(jìn)行打包了。更具體的就請(qǐng)查看一下官方文檔了，畢竟篇幅不能太長(zhǎng)。 Webpack 網(wǎng)上有很多webpack的介紹，也有不少的視頻，但是不少人看到應(yīng)該還是不是很了解webpack里面到底是講什么，而且報(bào)錯(cuò)了之后也是不知所措 那么...
摘要：目錄第課安裝和第課配置文件第課做為的一個(gè)模塊來使用第課插件篇第課模塊篇第課在開發(fā)中使用本文參考文檔官方模塊配置模塊配置中文翻譯模塊配置中文翻譯版本官方內(nèi)置清單第三方清單代碼托管及用法配置官方文檔模塊總覽我是首頁(yè)萬(wàn)事開頭 webpack目錄 第1課: 安裝webpack和webpack-dev-server 第2課: 配置文件 第3課: 做為node的一個(gè)模塊來使用 第4課: ...
閱讀 2043·2021-11-11 16:55
閱讀 1539·2019-08-30 15:54
閱讀 842·2019-08-29 15:34
閱讀 2346·2019-08-29 13:11
閱讀 2973·2019-08-26 13:28
閱讀 1963·2019-08-26 10:49
閱讀 1061·2019-08-26 10:40
閱讀 2639·2019-08-23 18:21
