Question

我的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

Windows 10
IE 11
反应16.8.1
webpack 4.34.0
@ babel / polyfill 7.0.0
babel-loader 8.0.6

SCRIPT1010：在IE11中编译React项目时出现预期的标识符错误

0 个答案: