Webpack差異構建

我正在嘗試為 web 構建 2 個版本，為現代瀏覽器構建一個，另一個讓舊的 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
        }
     ]

babel 有這個配置

{
"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，但在這種情況下，現代構建沒有現代代碼。

那么，我怎樣才能打造真正的現代建筑和舊建筑呢？

uj5u.com熱心網友回復：

正如我所說，對我來說，問題是 babel 編譯正確，但 webpack 每次都會選擇一個不是 babel 目標的瀏覽器串列，并至少添加一個IIFE箭頭函式，因此輸出代碼對于 IE 來說是錯誤的. 我發現的是webpack config中的這一行：

target: 'browserslist:legacy',

它指向我在 package.json 中的瀏覽器串列環境之一：

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

并從 babel 中洗掉目標：

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

所以 babel 為我的瀏覽器串列編譯，webpack 在開始時添加了正確的 IIFE 函式

標籤：网页包 IE浏览器 巴别塔

上一篇：在oracle中宣告行型別記錄時SQL陳述句無效

下一篇：404（未找到）帶有Webpack的SCSS