我尝试为web做两个版本,一个是为现代浏览器,另一个是为了让旧的IE 11满意。现在我有了webpack和babel,webpack有一系列的配置:
module.exports = [
{
//more config
name: "modern",
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
envName: "modern"
}
}
]
}
]
}
},
{
//more config
name: "legacy",
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
envName: "legacy"
}
}
]
}
]
}
//more config
}
]
巴别塔有这样的配置
{
"env": {
"modern": {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3.21,
"modules": false,
"targets": "> 5%, not dead"
}
]
]
},
"legacy": {
"browserslistConfigFile":false,
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3.21,
"modules": false,
"targets": "ie 11",
"ignoreBrowserslistConfig": true
}
]
]
}
}
问题是我不能做一个传统的构建。每次它输出一些箭头函数,这在IE上是不起作用的。我看到它采用默认的browserslist值,因为如果我在package.json中手动将browserslist全局设置为IE,它会输出IE有效的js,但在这种情况下,现代的构建没有现代的代码。
那么我如何才能让一个真正的现代建筑和一个老建筑?
1条答案
按热度按时间prdp8dxp1#
正如我所说的,对我来说问题是babel编译正确whit我的选择,但webpack每次选择一个browserslist,它不是babel的目标,并添加,至少,一个IIFE箭头函数,所以输出代码是错误的IE.我发现的是这行在webpack配置:
它指向package.json中的一个浏览器列表环境:
并从巴别塔中移除目标:
所以babel为我的browserslist编译,webpack在开始时添加了正确的IIFE函数