babel需要這樣配置

Babel 是一個編譯器(輸入源碼 => 輸出編譯后的代碼)。就像其他編譯器一樣,編譯過程分為三個階段:解析、轉(zhuǎn)換和打印輸出。
Babel的核心功能位于 @babel/core 模塊中。安裝:
npm install --save-dev @babel/core現(xiàn)在,Babel 雖然開箱即用,但是什么動作都不做。它基本上類似于 const babel = code => code; ,將代碼解析之后再輸出同樣的代碼。如果想要 Babel 做一些實(shí)際的工作,就需要為其添加插件。
要將 ES2015+ 語法轉(zhuǎn)換為 ES5,我們可以安裝以下官方插件 plugin:
npm install --save-dev @babel/plugin-transform-arrow-functions現(xiàn)在,我們代碼中的所有箭頭函數(shù)都將轉(zhuǎn)換為ES5兼容的函數(shù)表達(dá)式:
const fn = () => 1;// converted tovar fn = function fn() {return 1;};
除了一個一個的添加插件,你還可以以預(yù)設(shè) preset 的形式啟用一組插件。
npm install --save-dev @babel/preset-envbabel 在編譯時(shí)候,會把源代碼分為兩部分來處理:語法 syntax、API。語法 syntax 比如 const、let、模版字符串、擴(kuò)展運(yùn)算符等。API 比如 Array.includes() 等新函數(shù)。
預(yù)設(shè)/插件只會處理第一部分,也就是語法部分。@babel/polyfill,它是被用來處理上述說的 API 部分的:為瀏覽器不支持的 API 提供對應(yīng)的兼容性代碼,很明顯如果你不提供,如果在不支持的瀏覽器里面使用了新 API ,那么你的頁面就會掛掉。
{"presets": [["@babel/env",{"useBuiltIns": "entry","corejs": "3"}]]}// 然后你需要在你的項(xiàng)目入口文件中頂部引入polyfill。import '@babel/polyfill'。
從 babel V7.4.0 版本開始,已經(jīng)不建議使用該包,建議使用 core-js/stable(JS語法)、regenerator-runtime/runtime (函數(shù)運(yùn)行時(shí))替代。
{"presets": [["@babel/env",{"useBuiltIns": "entry","corejs": "3"}]]}// 然后你需要在你的項(xiàng)目入口文件中頂部引入polyfill。import "core-js/stable";import "regenerator-runtime/runtime";。
@babel/polyfill 依賴 corejs,corejs 是語法包,里面提供了很多的 ES6 語法,目前有兩個版本,默認(rèn) core-js@2 版本,還有 core-js@3 版本,版本越高,支持的語法越多,包越大。
@babel-polyfill會帶來的一些問題。
1、代碼體積大,因?yàn)闀繉?dǎo)入,不管你用不用的上。
改善方式是通過按需加載。
{"presets": [["@babel/env",{"targets": {"chrome": "58","ie": "11"},"useBuiltIns": "usage","corejs": "3"}]]}
2、會造成全局污染,比如引入新的全局對象或者修改現(xiàn)有對象原型。
@babel/runtime,是一個底層依賴,是一個生產(chǎn)環(huán)境依賴,需要被打包到最終的產(chǎn)物中,它本身會提供的是regenerator-runtime、以及各種helper函數(shù)。
我們?nèi)粘8嗟氖褂玫降氖?@babel/plugin-transform-runtime,這是一個開發(fā)環(huán)境依賴,插件會依賴到 @babel/runtime、@babel/runtime-corejs3等。
關(guān)于@babel/plugin-transform-runtime我們需要知道兩點(diǎn),1、babel在轉(zhuǎn)碼syntax過程中,會加入自己定義的很多babel函數(shù),這些babel函數(shù)可能會在每個文件都被重復(fù)引用,transform-runtime會把這些重復(fù)的helper函數(shù)轉(zhuǎn)換成公共的、單獨(dú)的依賴,節(jié)省轉(zhuǎn)碼后的文件體積。2、解決上述中@babel/polyfill會帶來的一些問題,transform-runtime以沙盒的方式將新特性API對應(yīng)的全局變量轉(zhuǎn)換為core-js、regenerator-runtime的引用。
最后總結(jié)一下,我需要安裝的依賴和配置,通過下面的例子,就可以保證代碼正常使用了:
npm install --save-dev @babel/plugin-transform-runtimenpm install --save @babel/runtimenpm install --save @babel/runtime-corejs3npm install --save-dev @babel/corenpm install --save-dev @babel/preset-env
在.babelrc配置:
{"presets": [["@babel/env",{"targets": {"chrome": "58","ie": "11"}}]],"plugins": [["@babel/transform-runtime",{"corejs": 3}]]}
