Webpack差异构建

wkyowqbh  于 2022-11-30  发布在  Webpack
关注(0)|答案(1)|浏览(142)

我尝试为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,但在这种情况下,现代的构建没有现代的代码。
那么我如何才能让一个真正的现代建筑和一个老建筑?

prdp8dxp

prdp8dxp1#

正如我所说的,对我来说问题是babel编译正确whit我的选择,但webpack每次选择一个browserslist,它不是babel的目标,并添加,至少,一个IIFE箭头函数,所以输出代码是错误的IE.我发现的是这行在webpack配置:

target: 'browserslist:legacy',

它指向package.json中的一个浏览器列表环境:

"browserslist": {
    "modern": [
        "> 5%",
        "not dead"
    ],
    "legacy": [
      "ie 11"
    ]
  },

并从巴别塔中移除目标:

{
    "env": {
        "modern": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "modules": false 
                    }
                ]
            ]
        },
        "legacy": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "useBuiltIns": "usage",
                        "corejs": 3.21,
                        "modules": false,
                    }
                ]
            ]
        }
    }
}

所以babel为我的browserslist编译,webpack在开始时添加了正确的IIFE函数

相关问题