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

Question

为了优化我的应用程序的页面加载时间，我将捆绑包分为两个捆绑包：webpack-bundle(包含我的代码)和vendor-bundle(包含节点模块中的所有内容)。但是当我的用户从Internet Explorer访问我的网站时，我开始遇到一些错误。他们得到的错误，如"include"未定义和"Object.entries"/"Object.values"未定义。显然，我需要包含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;

巴贝尔尔克

{
"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"
},

1. 如何确保babel/polyfill已加载并正确编译？我应该将其添加到条目中，还是提供插件？

2. babel/polyfill不应该已经包含在vendor-bundle中了吗？

Answer 1

我建议用这个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;

包.乔恩

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

上面的条目将向包括 ie10 和 ie11 在内的浏览器添加 polyfill。要检查这一点，请添加debug: true。控制台将准确显示已添加的内容、文件等。

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

更多浏览器和 github

Answer 2

尝试像这样将babel-polyfill添加到您的条目中，这是文档的链接。

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