我的React应用程序中有一个错误，该错误在IE11上不起作用。我尝试过polyfills，希望它们能在旧的浏览器上处理所有此类错误。最好的解决方案是提示所有IE用户下载Chrome或Firefox，但世界上没有仇恨的地方，再加上其中一位用户是我的祖母，她很可爱，所以我需要解决此问题。
我已经添加了babel-polyfill，还尝试将其直接添加到index.html <script src-"https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>. react-app-polyfill / ie11`似乎也不起作用。
这是我的babel配置：
module.exports = {
presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react', '@babel/preset-flow'],
plugins: [
'@babel/plugin-transform-async-to-generator',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-react-inline-elements',
'@babel/plugin-transform-react-constant-elements',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-template-literals',
].filter(Boolean),
env: {
test: {
presets: [
['@babel/preset-env',{ modules: false }],
'@babel/preset-react',
'@babel/preset-flow',
],
plugins: [
['emotion', { sourceMap: true, autoLabel: true }],
'@babel/plugin-transform-async-to-generator',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-transform-template-literals',
],
},
development: {
plugins: [['emotion', { sourceMap: true, autoLabel: true }]],
},
},
};
这是我的Webpack配置：
module.exports = {
mode: 'development',
entry: ['whatwg-fetch', '@babel/polyfill', 'bootstrap-loader', './app/index.js'],
output: {
filename: 'app.js',
chunkFilename: '[name].[hash:6].app.js', // for code splitting. will work without but useful to set
publicPath: '/',
path: path.resolve(__dirname, 'build', 'assets'),
},
resolve: {
modules: [path.resolve(__dirname, 'app'), 'node_modules'],
extensions: ['.js', '.jsx', '.css', '.scss'],
symlinks: false,
alias: {
react: path.resolve('../../node_modules/react'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /@babel(?:\/|\\{1,2})runtime|mapbox-gl/,
include: [path.resolve(__dirname, 'app'), /homelike/],
},
{
test: /bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/,
loader: 'imports-loader',
},
],
},
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV', 'APP_ENV']),
new webpack.DefinePlugin({
__PRODUCTION__: 'false',
}),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new BundleAnalyzerPlugin({
openAnalyzer: false,
}),
new HtmlWebPackPlugin({
template: './public/index.html',
filename: './index.html',
awKey: env.awKey,
tmKey: env.tmKey,
}),
],
devServer: {
contentBase: './build',
historyApiFallback: true,
port: 3000,
},
};
以下是我的入口点js文件中的代码：
import 'react-app-polyfill/ie11';
import 'object-assign-polyfill';
import 'string.prototype.startswith';
import 'string.fromcodepoint';
import '@babel/polyfill';
import React from 'react';
import { render } from 'react-dom';
...
render(
<IconProvider>
<Provider store={store}>
<ApolloProvider client={client}>
<StripeProvider apiKey={stripeKey.pk}>
<ThemeProvider theme={Theme}>
<Router history={history}>{routes}</Router>
</ThemeProvider>
</StripeProvider>
</ApolloProvider>
</Provider>
</IconProvider>,
document.getElementById('root')
);
// Hot Module Replacement
if (module.hot) {
module.hot.accept();
}
编辑：index.html
<meta http-equiv="X-UA-Compatible" content="IE=edge">
我收到错误SCRIPT1010: Expected identifier