Reactjs IE11带有React、Typescript、Babel和Webpack的空白页

我有一个用Typescript编写的React应用程序，带有Babel和Webpack。它在Firefox和Chrome中加载良好，但在InternetExplorer11中加载空白页面。我是这个项目的新手，在React/Babel/WebPack/Typescript方面的经验相对较低。我需要让应用程序与IE11一起工作。我花了几天的时间来学习我正在使用的东西，并尝试在网上找到的不同方法，但还没有找到解决方案。基于我在下面发布的工作内容，我希望这个优秀的社区能帮助我找到一个解决方案，在IE11中加载。我需要让它在prod中工作，但是开发不那么重要

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",
  }

巴勃勒克先生

{
  "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提供了单独的web包配置。它们都导入了一些常见的配置。这是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'],
            },
            .
            .

        ],
    },
    .
    .
};

特定于开发人员的网页包配置：

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

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

产品特定的网页包配置：

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

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();

导入“babel polyfill”；
从“React”导入*作为React；
从“react dom”导入*作为react dom；
从“react router dom”导入{BrowserRouter}；
从“react redux”导入{Provider}；
从“@date io/date fns”导入DateFnsUtils；
从“@material ui/pickers”导入{MuiPickersUtilsProvider}”；
从“/registerServiceWorker”导入registerServiceWorker；
从“@material ui/core”导入{ThemeProvider}”；
从“/App”导入应用程序；
从“/modules/shared/store/store”导入存储；
从“/modules/shared/common/theme”导入{theme}”；
常量应用=(
);
render（app，document.getElementById（“root”）| | document.createElement（“div”）；
registerServiceWorker（）；

请尝试一下，我在尝试跟踪所有版本更改和弃用中错综复杂的文档和API时遇到了很大困难：

---

您有哪个网页版本？第4页还是第5页？在IE 11中有什么错误？IE中的错误是SCRIPT1010：预期标识符。看起来我们有第四个网页。以下是package.json:`“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”，“网页包合并”：“^4.2.1”`在React应用程序的

src

文件夹中，您将找到

index.js

文件。我建议在顶部加上这两行<代码>导入“react app polyfill/ie11”；导入“react app polyfill/stable”之后，打开

package.json

文件。在

开发

和

生产

部分中添加

“ie 11”

。然后尝试删除

节点_modules

下的

.cache

文件夹，然后再次尝试运行该应用程序。看看能不能装上。尝试在

开发

和

生产

@Deepak MSFT中启动此应用程序是typescript，因此我们没有index.js，我们有index.tsx。我尝试过react app polyfill，但它没有让应用程序正常工作。我不确定你所说的package.json的开发和生产部分是什么意思。@chenxsan上面的SCRIPT1010错误和其他细节给了你什么想法吗？