babel介紹
-
Babel是一個(gè)JavaScript 編譯器庶骄，可以把ES6的語(yǔ)法轉(zhuǎn)為兼容瀏覽器的ES5語(yǔ)法劫狠； -
Babel可以單獨(dú)使用栅干，但是一般都是和webpack結(jié)合一起使用 -
webpack里使用babel最基本的幾個(gè)包：babel-loader新锈、babel-core碍讨、babel-preset-env治力、babel-polyfill
@babel/core
-
@babel/core包括了整個(gè)babel的工作流（輸入字符串 -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator -> 輸出字符串），是babel的核心包勃黍。 - 可以看做
babel的編譯器宵统。babel的核心api都在這里面，比如transform覆获，主要都是處理轉(zhuǎn)碼的榜田。它會(huì)把我們的js代碼，抽象成ast锻梳，即abstract syntax tree的縮寫(xiě)箭券，是源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式。 - 我們可以理解為疑枯，它定義的一種分析
js語(yǔ)法的樹(shù)狀結(jié)構(gòu)辩块。也就是說(shuō)es6的新語(yǔ)法，跟老語(yǔ)法是不一樣的，那我們?cè)趺慈ザx這個(gè)語(yǔ)法呢废亭。所以必須要先轉(zhuǎn)成ast国章，去發(fā)現(xiàn)這個(gè)語(yǔ)法的kind，分別做對(duì)應(yīng)的處理豆村，才能轉(zhuǎn)化成es5.
@babel/preset-env
-
Babel插件一般盡可能拆成小的力度液兽，開(kāi)發(fā)者可以按需引進(jìn)。比如對(duì)ES6轉(zhuǎn)ES5的功能掌动，Babel官方拆成了20+個(gè)插件四啰。 - 這樣的好處顯而易見(jiàn)，既提高了性能粗恢，也提高了擴(kuò)展性柑晒。比如開(kāi)發(fā)者想要體驗(yàn)ES6的箭頭函數(shù)特性，那他只需要引入
transform-es2015-arrow-functions插件就可以眷射，而不是加載ES6全家桶匙赞。 - 但很多時(shí)候，逐個(gè)插件引入的效率比較低下妖碉。比如在項(xiàng)目開(kāi)發(fā)中涌庭，開(kāi)發(fā)者想要將所有ES6的代碼轉(zhuǎn)成
ES5，插件逐個(gè)引入的方式令人抓狂欧宜，不單費(fèi)力坐榆，而且容易出錯(cuò)。 - 這個(gè)時(shí)候鱼鸠，可以采用
Babel Preset猛拴。 - 可以簡(jiǎn)單的把
Babel Preset視為Babel Plugin的集合羹铅。 - 這個(gè)
preset真是神器啊蚀狰，它能根據(jù)當(dāng)前的運(yùn)行環(huán)境，自動(dòng)確定你需要的plugins和polyfills职员。 -
Plugin與Preset執(zhí)行順序：可以同時(shí)使用多個(gè)Plugin和Preset麻蹋，此時(shí)，它們的執(zhí)行順序非常重要焊切。先執(zhí)行完所有Plugin扮授，再執(zhí)行Preset。多個(gè)Plugin专肪，按照聲明次序順序執(zhí)行刹勃。多個(gè)Preset，按照聲明次序逆序執(zhí)行嚎尤。
browserslist
browserslist指定了項(xiàng)目的目標(biāo)瀏覽器的范圍荔仁。這個(gè)值會(huì)被 @babel/preset-env 和 Autoprefixer 用來(lái)確定需要轉(zhuǎn)譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。
三種方式去配置：
- 在
.babelrc或者babel.config.js中去配置
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "4",
"chrome": "58",
"ie": "11"
}
}
]
]
}
- 在
package.json里面增加如下配置
{
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
}
- 在工程的根目錄下存在
.browerslistrc配置文件
last 1 version
> 1%
maintained node versions
not dead
除了browserslist,另外還要在webpack.config.js中配置babel-loader
module: {
rules: [
{ ...其他loader...},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
}
]
}
package.json中也要配置相關(guān)的依賴(lài)
"dependencies": {
"babel-polyfill": "^6.26.0",
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.3.2",
},
要用@babel/polyfill的話(huà)，還要在入口文件中引入
image
@babel/polyfill&runtime&core-js
-
Babel默認(rèn)只轉(zhuǎn)換新的JavaScript語(yǔ)法（syntax）乏梁，如箭頭函數(shù)等次洼，而不轉(zhuǎn)換新的API，比如Iterator遇骑、Generator卖毁、Set、Maps落萎、Proxy亥啦、Reflect、Symbol模暗、Promise等全局對(duì)象禁悠，以及一些定義在全局對(duì)象上的方法（比如Object.assign）都不會(huì)轉(zhuǎn)碼；所以光是使用@babel/preset-env是不夠的兑宇，我們還需要polyfill碍侦； -
@babel/polyfill——讓目標(biāo)瀏覽器支持所有特性，不管它是全局的隶糕，還是原型的瓷产，或是其它。這樣枚驻，通過(guò)@babel/polyfill濒旦，不同瀏覽器在特性支持上就站到同一起跑線(xiàn)。但是這樣做也有一個(gè)缺點(diǎn)再登，就是會(huì)污染全局變量尔邓，而且項(xiàng)目打包以后體積會(huì)增大很多，因?yàn)榘颜麄€(gè)依賴(lài)包也搭了進(jìn)去锉矢。所以并不推薦在一些方法類(lèi)庫(kù)中去使用梯嗽。 -
@babel/preset-env下有一個(gè)選項(xiàng)useBuiltIns，用于指導(dǎo)@babel/preset-env如何觸發(fā)polyfills.useBuiltIns有三個(gè)可能的值usage | entry | false沽损。usage：根據(jù)實(shí)際項(xiàng)目中真正使用到的有需要兼容的polyfill添加進(jìn)去 -
@babel/runtime： -
@babel/runtime-corejs2：
