帶有 React、Typescript、Babel 和 Webpack 的 IE11 空白頁面

Question

我有一個用 Typescript 和 Babel 和 Webpack 編寫的 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"]
    }
  }
}

配置文件

{
  "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' },
    ]),
  ],
});

Prod 特定的 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' },
    ]),
  ],
});

索引.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();

Answer 1

請嘗試這個，我在嘗試遵循所有版本更改和棄用中令人費解的文檔和 api 時遇到了很大的困難：

如何使用 Webpack 5 和 Babel 7 創建 IE11 Bundle