我們可以通過配置來使項(xiàng)目兼容某些瀏覽器。
package.json 文件里的 browserslist 字段 (或一個單獨(dú)的 .browserslistrc 文件)，指定了項(xiàng)目的目標(biāo)瀏覽器的范圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉(zhuǎn)譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。browserslist具體使用方法：https://github.com/browserslist/browserslist
Polyfill
Babel中useBuiltIns如果設(shè)為 "usage"，Babel 會根據(jù)實(shí)際代碼中使用的代碼，以及配置的browserslist，按需引入對應(yīng)的 polyfill。已確保最終包里 polyfill 數(shù)量的最小化。然而，如果其中一個依賴需要特殊的 polyfill，默認(rèn)情況下 Babel 無法將其檢測出來。以下幾種方法可以解決：
- 使用
@vue/babel-preset-app的 polyfills 選項(xiàng)預(yù)包含所需要的 polyfill。注意es6.promise將被默認(rèn)包含，因?yàn)楝F(xiàn)在的庫依賴 Promise 是非常普遍的。
// babel.config.js
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
將其添加到
vue.config.js中的transpileDependencies選項(xiàng)。這會為該依賴同時開啟語法語法轉(zhuǎn)換和根據(jù)使用情況檢測 polyfill。使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'。這會根據(jù) browserslist 目標(biāo)導(dǎo)入所有 polyfill，這樣你就不用再擔(dān)心依賴的 polyfill 問題了，但是因?yàn)榘艘恍]有用到的 polyfill 所以最終的包大小可能會增加。
現(xiàn)代模式
有了 Babel 我們可以兼顧所有最新的 ES2015+ 語言特性，但也意味著我們需要交付轉(zhuǎn)譯和 polyfill 后的包以支持舊瀏覽器。這些轉(zhuǎn)譯后的包通常都比原生的 ES2015+ 代碼會更冗長，運(yùn)行更慢。
vue-cli-service build --modern
Vue CLI 提供了一個“現(xiàn)代模式”，會產(chǎn)生兩個應(yīng)用的版本：一個現(xiàn)代版的包，面向支持 ES modules 的現(xiàn)代瀏覽器，另一個舊版的包，面向不支持的舊瀏覽器。
