方法一:
使用插件:babel-loader @babel/core @babel/preset-env
缺点:只能处理基本的js兼容性问题,Promise等高级语法就不能转换
方法二:
使用插件:@babel/polyfill (安装后导入即可)
缺点:这个插件会将所有的兼容性代码全部引入,会导致打包后文件体积变大
方法三:
使用插件:core-js,按需加载
所以可以选择方法一 + 方法三来处理js兼容性问题,代码如下:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设:指示babel做怎么样的兼容性处理
presets: [
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
}
}
]
},