react app with webpack/babel 在 IE 浏览器上显示为空白

Question

我有用 react-router、redux、webpack4、babel 构建的 react-hooks 应用程序。 而且我无法在 IE 浏览器上获得 react 应用程序渲染。

我猜这是将 es6 转换为 es5 的问题。

这是我尝试过的事情。 但它们都不起作用。

index.html

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>

index.js 在索引字段时导入'core-js'或'react-app-polyfill'。

import 'core-js';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';

babel.js 向 env 添加目标选项。

presets: [
    [
      'env',
      {
        useBuiltIns: 'entry',
        targets: {
          browsers: [
            'last 1 version',
            '> 1%',
            'not dead',
            'ie >= 9'
          ],
          uglify: true,
        },
        loose: true,
        modules: isTest ? 'commonjs' : false,
        debug: isTest ? false : true,
      },
    ],
    'react',
  ],
plugins: [
    'transform-runtime',
    'transform-class-properties',
    'transform-object-rest-spread',
    'syntax-dynamic-import',
]

package.json

"browserslist": [
    "last 1 version",
    "> 1%",
    "not dead",
    "ie >= 9"
  ],

webpack.base.js 将浏览器选项添加到 'postcss-loader, autoprefixer'。

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: babelConfig,
          },
        ],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              minimze: true,
              sourceMap: devMode,
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              indent: 'postcss',
              plugins: [
                autoprefixer({
                  browsers: ['last 1 version',
                             '> 1%',
                             'not dead',
                             'ie >= 9'
                  ],
                }),
              ],
              sourceMap: devMode,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: devMode,
              includePaths: ['client/styles/main.scss'],
            },
          },
        ],
      },
    ],
  },
 ...
  },

版本

"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^4.3.1",
"connected-react-router": "^6.4.0",
"react-redux": "^6.0.0",
"webpack": "^4.16.5",
"babel-core": "^6.26.3",
"core-js": "^2.5.7",
"react-app-polyfill": "^1.0.2",

------------------- 版本 --------------- ------------------

更新：在 IE 浏览器中添加错误消息并创建代码沙箱。

code sandbox link

------------------- 版本 --------------- ------------------

更新到最新的 IE 版本后。 我在vendors.lazy-chunk.js 中得到Back navigation caching error 和JS syntax error。

------------------- 版本 --------------- ------------------

登录功能代码示例更新。 code sample

Answer 1

我在我这边复制了你的代码，让它在IE 11中运行没有任何错误。你可以参考我的步骤：

1. 使用create-react-app 创建一个反应应用。

2. 我使用了您的 CodeSandbox 中的文件，并修改了其中的一些。

(1) 你可以查看我的package.json。

(2)我也修改了index.js，我们只需要在index.js的第一行添加import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';，使其兼容IE 11即可。

(3) 我还在 store.js 中将import createBrowserHistory from "history/createBrowserHistory"; 修改为import { createBrowserHistory } from 'history';。否则会抛出错误“警告：请使用require("history").createBrowserHistory 而不是require("history/createBrowserHistory")。对后者的支持将在下一个主要版本中删除。”

1. 手动安装以下软件包。注意 webpack 版本是 4.39.1。就我而言，我还安装了 node-sass：

4. 运行npm start 启动应用程序。 IE 11 中的截图是这样的：https://i.stack.imgur.com/aTq5G.png。

您也可以在这里查看我的示例：https://stackblitz.com/edit/react-vhafos。