Object.entries/Object.values 在 IE 11 中使用 Babel-polyfill 未定义

Question

为了优化我的应用程序的页面加载时间，我将包分成两个包：webpack-bundle（包含我的代码）和 vendor-bundle（包含节点模块中的所有内容）。但是当我的用户从 Internet Explorer 访问我的网站时，我开始遇到一些错误。他们得到像 "includes" is undefined 和 "Object.entries"/"Object.values" are undefined 这样的错误。显然，我需要包含 babel-polyfill 并在其他包之前加载它。但是当我的条目是一个对象时，我不确定如何去做。

这是旧条目。它是一个数组（在我拆分包之前）：

const config = {
  "entry": [
    "es5-shim/es5-shim", 
    "es5-shim/es5-sham",
    "url-search-params-polyfill",   
    "@babel/polyfill",  
    "./app/registration"    
  ],

这是我当前的 webpack.config，我将条目更改为一个对象并使用了 splitChunks。这将输出两个包。

const config = {
  "entry": {
    "webpack-bundle": "./app/registration"
  },

  "output": {
    filename: "[name].js",
    path: pathLib.resolve(__dirname, "../app/assets/webpack"),
  },

  "module": {
    "rules": [
      {
        "test": /\.(svg)$/,
        "use": [
          {
            "loader": "url-loader",
            "options": {"limit": 8192}
          }
        ]
      },
      {
        "test": /\.css$/,
        "use": [
          "style-loader",
          "css-loader"
        ]
      },
      {
        "test": require.resolve("react"),
        "use": {
          "loader": "imports-loader",
          "options": {
            "sham": "es5-shim/es5-sham",
            "shim": "es5-shim/es5-shim"
          }
        },
      },
      {
        "exclude": /node_modules/,
        "test": /\.jsx?$/,
        "use": {
          "loader": "babel-loader",
          "options": {
            "plugins": [
              "@babel/plugin-proposal-class-properties",
              ["@babel/plugin-proposal-decorators", {"legacy": true}],
              "@babel/plugin-proposal-export-namespace-from",
              "@babel/plugin-proposal-function-sent",
              "@babel/plugin-proposal-json-strings",
              "@babel/plugin-proposal-numeric-separator",
              "@babel/plugin-proposal-object-rest-spread",
              "@babel/plugin-proposal-throw-expressions",
              "@babel/plugin-syntax-dynamic-import",
              "@babel/plugin-syntax-import-meta",
              "@babel/plugin-transform-react-jsx"
            ],
            "presets": [
              "@babel/preset-env",
              "@babel/preset-react"
            ]
          }
        }
      }
    ],
  },

  "plugins": [
    new webpack.ProvidePlugin({
      "$": "jquery",
      "jQuery": "jquery",
      "window.jQuery": "jquery"
    }),
    new UglifyJsPlugin()
  ],

  "optimization": {
    "splitChunks": {
      "cacheGroups": {
        "vendor": {
          "test": /node_modules/,
          "chunks": "all",
          "name": "vendor-bundle"
        }
      }
    }
  },

  "resolve": {
    "alias": {
      "Lib": pathLib.resolve(__dirname, "app/lib/"),
      "Shared": pathLib.resolve(__dirname, "app/shared/")
    },
    "extensions": [".js", ".jsx"]
  }
};

module.exports = config;

babelrc

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-transform-react-jsx",
   [ "@babel/plugin-transform-runtime", {"regenerator": true}]
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

我试过用这种方式重写条目，但没有成功：

 "entry": {
    "polyfill-bundle": "@babel/polyfill",
    "es5-shim-bundle": "es5-shim/es5-shim",
    "es5-sham-bundle": "es5-shim/es5-sham",
    "webpack-bundle": "./app/registration"
  },

如何确保 babel/polyfill 已加载并正确编译？我应该在条目中添加它，还是 ProvidePlugin?
babel/polyfill 不应该包含在 vendor-bundle 中吗？

Answer 1

尝试像这样将 babel-polyfill 添加到您的条目中，这里是 link 到 docs。

const config = {
  "entry": {
    "webpack-bundle": ["babel-polyfill","./app/registration"]
  },
...

Answer 2

我建议用这个 core-js 替换 babel-polyfill。安装core-js，创建一个.babelrc文件并放入其中。

.babelrc

{
 "presets": [
    [
     "@babel/preset-env",
     {
      "useBuiltIns": "usage",
      "corejs": 3
     }
   ],
   "@babel/preset-react"
  ]
}

webpack.conf.js

const config = {
  "entry": {
    "webpack-bundle": "./app/registration"
  },

  "output": {
    filename: "[name].js",
    path: pathLib.resolve(__dirname, "../app/assets/webpack"),
  },

  "module": {
    "rules": [
      {
        "test": /\.jsx?$/,
        "exclude": /node_modules/,
        "use": {
          "loader": "babel-loader",
          }
        }
      },
      {
        "test": /\.css$/,
        "use": [
          "style-loader",
          "css-loader"
        ]
      },
      {
        "test": /\.(svg)$/,
        "use": [{
          "loader": "url-loader",
          "options": {
            "limit": 8192
          }
        }]
      },
    ],
  },

  "plugins": [
    new webpack.ProvidePlugin({
      "$": "jquery",
      "jQuery": "jquery",
      "window.jQuery": "jquery"
    }),
    new UglifyJsPlugin()
  ],

  "optimization": {
    "splitChunks": {
      "cacheGroups": {
        "vendor": {
          "test": /node_modules/,
          "chunks": "all",
          "name": "vendor-bundle"
        }
      }
    }
  },
  "resolve": {
    "alias": {
      "Lib": pathLib.resolve(__dirname, "app/lib/"),
      "Shared": pathLib.resolve(__dirname, "app/shared/")
    },
    "extensions": [".js", ".jsx"]
  }
};

module.exports = config;

package.jon

"browserslist": [
  "last 2 version",
  "> 1%",
  "not dead"
],

以上条目将为包括 ie10 和 ie11 在内的浏览器添加 polyfill。要检查这一点，请添加 debug: true。控制台会准确显示添加了什么，添加了什么文件等

{
  debug: true,
  "useBuiltIns": "usage",
  "corejs": 3
}

更多browserl and github

Object.entries/Object.values 在 IE 11 中使用 Babel-polyfill 未定义

Object.entries/Object.values is undefined with Babel-polyfill in IE 11

webpack

babeljs

babel-polyfill