babel 有多種預(yù)設(shè)，最常見(jiàn)的預(yù)設(shè)是 @babel/preset-env，它可以讓你使用最新的 JS 語(yǔ)法，而無(wú)需針對(duì)每種語(yǔ)法轉(zhuǎn)換設(shè)置具體的插件。

@babel/preset-env 預(yù)設(shè)

安裝

npm i -D @babel/preset-env

配置

.babelrc 文件

在根目錄下新建 .babelrc 文件，并設(shè)置以下內(nèi)容：

{"presets": ["@babel/preset-env"]
}

兼容瀏覽器

@babel/preset-env 需要根據(jù)兼容的瀏覽器范圍來(lái)確定如何編譯，和 postcss 一樣，可以使用文件 .browserslistrc 來(lái)描述瀏覽器的兼容范圍。

在根目錄下新建 .browserslistrc 文件，并設(shè)置以下內(nèi)容：

last 3 version
> 1%
not ie <= 8

它的書(shū)寫(xiě)規(guī)范多而繁瑣，詳情見(jiàn)：https://github.com/browserslist/browserslist

預(yù)設(shè)的配置

和 postcss-preset-env 一樣， @babel/preset-env 自身也有一些配置，具體的配置見(jiàn)：https://www.babeljs.cn/docs/babel-preset-env#options

{"presets": [["@babel/preset-env", {"配置項(xiàng)1": "配置值","配置項(xiàng)2": "配置值","配置項(xiàng)3": "配置值"}]]
}

其中一個(gè)比較常見(jiàn)的配置項(xiàng)是 usebuiltins，該配置的默認(rèn)值是 false，它有什么用呢？由于該預(yù)設(shè)僅轉(zhuǎn)換新的語(yǔ)法，并不對(duì)新的 API 進(jìn)行任何處理。

例如：

new Promise(resolve => {resolve()
})

轉(zhuǎn)換的結(jié)果為

new Promise(function (resolve) {resolve();
});

如果遇到?jīng)]有 Promise 構(gòu)造函數(shù)的舊版本瀏覽器，該代碼就會(huì)報(bào)錯(cuò)，而配置 usebuiltins 可以在編譯結(jié)果中注入這些新的 API，它的值默認(rèn)為 false ，表示不注入任何新的 API，可以將其設(shè)置為 usage，表示根據(jù) API 的使用情況，按需導(dǎo)入 API。

{"presets": [["@babel/preset-env", {"useBuiltIns": "usage","corejs": 3}]]
}