带有 React、Typescript、Babel 和 Webpack 的 IE11 空白页面答案

【问题标题】：IE11 Blank Page with React, Typescript, Babel, and Webpack带有 React、Typescript、Babel 和 Webpack 的 IE11 空白页面
【发布时间】：2021-03-04 10:23:55
【问题描述】：

我有一个使用 Babel 和 Webpack 用 Typescript 编写的 React 应用程序。它在 Firefox 和 Chrome 中加载良好，但在 Internet Explorer 11 中加载空白页面。我是这个项目的新手，对 React/Babel/WebPack/Typescript 的经验相对较低。我需要让应用程序与 IE11 一起工作。我花了几天时间了解我正在使用什么，并尝试了我在网上找到的不同方法，但还没有找到解决方案。根据我在下面发布的内容，我希望这个优秀的社区可以帮助我找到在 IE11 中加载此加载的解决方案。我需要让它在产品中工作，但开发不是问题。

package.json 中的相关内容

.
.
  "scripts": {
    "build": "eslint './**' && npm run clean-dist && webpack -p --config=configs/webpack/prod.js",
    "clean-dist": "rm -f -r -d dist",
    "lint": "eslint './**'",
    "start": "npm run start-dev",
    "start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
    "test": "jest --watch --coverage --config=configs/jest.json",
    "prettier": "prettier 'src/**/*.{ts,tsx}' --check",
    "prettier:fix": "prettier 'src/**/*.{ts,tsx}' --write",
    "createVersionFile": "node ./bin/createVersionFile.js"
  },
  .
  .
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    .
    .
    "@types/node": "^11.9.6",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/react-intl": "^2.3.17",
    "@types/react-redux": "^7.1.9",
    "@types/react-router": "^5.1.7",
    "@types/react-router-dom": "^5.1.5",
    "@types/react-test-renderer": "^16.9.1",
    .
    .
    "babel-jest": "^24.1.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-react-intl": "^3.0.1",
    "copy-webpack-plugin": "^5.1.1",
    .
    .
    "webpack-cli": "^3.2.3",
    "webpack-dev-middleware": "^3.6.0",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.2.1"
  },
    dependencies": {
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    .
    .
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-dropzone": "^11.0.3",
    "react-intl": "^2.8.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
  }

.bablerc

{
  "presets": [
    ["@babel/preset-env", {"modules": false}],
    "@babel/preset-react"
  ],
  "plugins": ["react-hot-loader/babel", "transform-regenerator"],
  "env": {
    "production": {
      "presets": ["minify"]
    },
    "test": {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "strictNullChecks": true,
    "strict": true,
    "suppressImplicitAnyIndexErrors": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "lib": [
      "es5",
      "es6",
      "es2019",
      "dom"
    ],
    "baseUrl": "./",
    "paths": {
      "*" : ["src/@types/*"]
    },
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "include": [
    "./src/**/*",
    "./tests/*"
  ],
  "awesomeTypescriptLoaderOptions": {
    "reportFiles": [
      "./src/**/*"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

我们为 prod 和 dev 提供了单独的 Webpack 配置。它们都导入了一些常见的配置。这是 prod 和 dev Webpack 配置使用的公共配置的相关部分：

// shared config (dev and prod)
const {resolve} = require('path');
const {CheckerPlugin} = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    context: resolve(__dirname, '../../src'),
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader', 'source-map-loader'],
                exclude: /node_modules/,
            },
            {
                test: /\.tsx?$/,
                use: ['babel-loader', 'awesome-typescript-loader'],
            },
            .
            .

        ],
    },
    .
    .
};

开发特定的 Webpack 配置：

const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = merge(commonConfig, {
  mode: 'development',
  entry: [
    'react-hot-loader/patch', // activate HMR for React
    'webpack-dev-server/client?http://localhost:8081',// bundle the client for webpack-dev-server and connect to the provided endpoint
    'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
    'babel-polyfill',
    './index.tsx' // the entry point of our app
  ],
  output: {
    publicPath: '/iq-customize'
  },
  devServer: {
    //historyApiFallback: true,
    //contentBase: './',
    hot: true, // enable HMR on the server
    port: 8081
  },
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // enable HMR globally
    new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
    new CopyWebpackPlugin([
      { from: '../public', to: 'public' },
    ]),
  ],
});

产品特定的 Webpack 配置：

const merge = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const {resolve} = require('path');

const commonConfig = require('./common');

module.exports = merge(commonConfig, {
  mode: 'production',
  entry: './index.tsx',
  output: {
    filename: 'js/bundle.[hash].min.js',
    path: resolve(__dirname, '../../dist'),
    publicPath: '/iq-customize/',
  },
  devtool: 'source-map',
  plugins: [
    new CopyWebpackPlugin([
      { from: '../public', to: 'public' },
    ]),
  ],
});

index.tsx

import "babel-polyfill";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import DateFnsUtils from "@date-io/date-fns";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import registerServiceWorker from "./registerServiceWorker";
import { ThemeProvider } from "@material-ui/core";

import App from "./App";
import store from "./modules/shared/store/store";
import { theme } from "./modules/shared/common/Theme";

const app = (
    <Provider store={store}>
        <BrowserRouter basename="/xxxxx">
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <ThemeProvider theme={theme}>
                    <App />
                </ThemeProvider>
            </MuiPickersUtilsProvider>
        </BrowserRouter>
    </Provider>
);

ReactDOM.render(app, document.getElementById("root") || document.createElement("div"));
registerServiceWorker();

【问题讨论】：

你有哪个 webpack 版本？ webpack 4 还是 5？你在 IE 11 下有什么错误？
IE 中的错误是 SCRIPT1010: Expected identifier。看起来我们有 Webpack 4。以下是 package.json 中所有与 webpack 相关的依赖项：` "dotenv-webpack": "^1.7.0", "html-webpack-plugin": "^3.2.0", "image -webpack-loader”：“^4.6.0”，“uglifyjs-webpack-plugin”：“^2.1.2”，“webpack”：“^4.29.6”，“webpack-cli”：“^3.2.3 ", "webpack-dev-middleware": "^3.6.0", "webpack-dev-server": "^3.2.1", "webpack-merge": "^4.2.1" `
在你的 React 应用程序的 src 文件夹中，你会找到 index.js 文件。我建议在顶部添加这两行。 import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; 之后，打开package.json 文件。在development 和production 部分中添加"ie 11"。然后尝试删除node_modules 下的.cache 文件夹并再次尝试运行该应用程序。看看有没有负载。尝试在development 和production 中启动。
@Deepak-MSFT 这个应用程序是打字稿，所以我们没有 index.js，我们有 index.tsx。我已经尝试过 react-app-polyfill，但它没有让应用程序正常工作。不知道你所说的 package.json 的开发和生产部分是什么意思。
@chenxsan 上面的 SCRIPT1010 错误和其他细节是否给您任何想法？

标签： reactjs typescript webpack babeljs internet-explorer-11

【解决方案1】：

请试试这个，我在尝试遵循所有版本更改和弃用中的复杂文档和 API 时遇到了很大的困难：

How to create IE11 Bundles with Webpack 5 and Babel 7

【讨论】：