一牵寺、使用
安裝
npm install --save-dev @babel/core @babel/cli @babel/preset-env
配置文件
Babel 有兩種并行的配置文件格式叫胁，可以一起使用亡问，也可以獨(dú)立使用枉侧。
-
全項(xiàng)目配置
babel.config.json/babel.config.js文件
- 注：可以是js文件引瀑，可以是json文件
Babel在項(xiàng)目根目錄中自動搜索babel.config.json文件，或使用受支持?jǐn)U展名的等效文件
-
文件相關(guān)配置
.babelrc.json/.babelrc.js文件
- 注：可以是js文件榨馁，可以是json文件
Babel通過從正在編譯的“文件名”開始搜索目錄結(jié)構(gòu)來加載.babelrc.json文件憨栽，直至找到包含package.json的目錄下。
二翼虫、預(yù)設(shè)
預(yù)設(shè)是指預(yù)先在babel內(nèi)部設(shè)置好的插件屑柔，可以直接使用。
示例：
{
preset: [
"@babel/preset-env",
{
target: {
edge: 17,
firefox: 60,
safari: 111
}
},
{ useBuiltIns: "usage" },
]
}
1. preset
- @babel/preset-env 用于編譯 ES2015+ 語法
- @babel/preset-typescript for TypeScript 編譯ts珍剑，替代了ts-loader
- @babel/preset-react for React
使用preset預(yù)設(shè)
在配置文件中添加presets字段掸宛，執(zhí)行順序是從右到左。
{
"presets": ["@babel/preset-env"]
}
2. target
targets 是需要兼容的瀏覽器版本
- 他的值有：
android, chrome, deno, edge, electron, firefox, ie, ios, node, opera, rhino, safari, samsung - 可以設(shè)置成一個
string招拙，比如> 0.5%,last 2 versions, not dead意思是有大于百分之零點(diǎn)五的人使用唧瘾，前兩個版本，并且沒有廢棄
3. useBuildIns
useBuildIns需要安裝corejs使用
npm i core-js -S
比如：
{ useBuiltIns: "usage" },
-
false： 默認(rèn)值别凤，不做任何語法轉(zhuǎn)換 -
usage：Babel 將檢查你的所有代碼饰序，以便查找targets環(huán)境中缺失的功能，然后只把必須的 polyfill 包含進(jìn)來 - entry：引入所有的polyfill包规哪，必須在入口文件加入
import "core-js/stable"才會生效
4. corejs
安裝的corejs版本號
什么是corejs?
babel編譯只能針對瀏覽器行為菌羽，es6語法規(guī)定的，如promise由缆、async/await則無法轉(zhuǎn)義注祖。這種情況下則需要配置corejs。
之前這個操作通過babel-polyfill插件均唉，但在7.4之后該插件已被廢棄是晨。
