Weback 清单文件无法编译为 es5

Question

最近，由于webpack清单文件中有.includes，IE11无法运行，我们的构建已停止在IE11上运行。

我对此进行了深入研究，发现react-datepicker在它的代码中使用了.includes()，但在我们的main.app.js文件中，它会转换它，所以里面什么都不存在，它只在清单文件中。

如果我从我们的webpack中删除清单文件，则错误会转移到main.app.js文件，即object doesn't support property or method includes。此错误来自redux-actions的camelCase.js。我觉得这是转移注意力，但不完全确定。

我不确定这是一个webpack问题，还是一个babel，或者插件错误。

如何解决此问题？

到目前为止我所做的步骤：

我已经在我们的包.json.中锁定了对16.3.0版本的反应

我降级了react-datepicker插件。

我已删除正在加载的清单文件。

我已尝试更新redux-actions。

我已尝试降级redux-actions

这是我的webpack文件：

const pkg = require('../package.json');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const appConfig = {
VERSION: pkg.version,
OUTPUT_NAME: pkg.config.OUTPUT_NAME,
DEV_PORT: pkg.config.DEV_PORT
};
const config = {
mode: 'development',
context: path.resolve(__dirname),
entry: {
app: [
'../src/index.js',
'../src/styles/main.css',
'../index.pug'
]
},
output: {
path: path.resolve(__dirname, '../public/'),
filename: `scripts/${appConfig.OUTPUT_NAME}.[name].${appConfig.VERSION}.js`,
publicPath: '/'
},
resolve: {
extensions: [ '.js', '.jsx' ]
},
externals: {
'lottie-web': 'lottie'
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /.(css|scss)$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1
}
},
'postcss-loader'
]
},
{
test: /.pug/,
exclude: /node_modules/,
use: 'pug-loader'
},
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
exclude: /node_modules/,
use: 'file-loader'
}
]
},
watch: true,
watchOptions: {
ignored: /node_modules/
},
devServer: {
contentBase: path.resolve(__dirname, '../public/'),
port: appConfig.DEV_PORT,
historyApiFallback: true
},
devtool: 'source-map',
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'manifest',
chunks: 'all'
}
}
}
},
plugins: [
new ExtractTextPlugin(`../styles/${appConfig.OUTPUT_NAME}.[name].${appConfig.VERSION}.css`),
new CopyWebpackPlugin([
{ from: '../src/assets', to: path.resolve(__dirname, '../public/assets') },
{ from: '../src/content', to: path.resolve(__dirname, '../public/content') }
]),
new HtmlWebpackPlugin({ 'template': '../index.pug' })
]
};
module.exports = config;

Answer 1

与其试图摆脱导致与Internet Explorer 11不兼容问题的库，我建议在运行时使用polyfill来添加对问题API(如Array.includes(((的支持。

可能最流行的解决方案是巴别塔Polyfill。

您可以通过在页面的HTML代码中添加以下脚本标记来使用它：

<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js" integrity="sha256-WRc/eG3R84AverJv0zmqxAmdwQxstUpqkiE+avJ3WSo=" crossorigin="anonymous"></script>

注意属性nomodule，这是为了确保只有不支持ES2015模块的浏览器才能真正加载polyfill，即IE11。

现代浏览器(Chrome、Firefox、Safari等(只会忽略脚本标记，不会给用户带来额外下载的负担。