reactjs - Babel 7 preset-env useBuiltIns: "usage" Symbol is undefined problem in IE11

Question

我在使用 Webpack 5 和 Babel 7 的 React 项目中遇到了 useBuiltIns: "usage" 的问题。使用useBuiltIns: "entry" 时，该项目在 IE11 中运行良好，但使用useBuiltIns: "usage"我得到了'Symbol ' 是 IE11 中未定义的错误。

这是我的 package.json：

    {
    "name": "webpack-demo",
    "version": "0.0.1",
    "license": "MIT",
    "scripts": {
        "start": "webpack serve --config webpack.dev.config.ts",
        "build": "webpack --config webpack.prod.config.ts"
    },
    "devDependencies": {
        "@babel/core": "^7.14.6",
        "@babel/plugin-transform-runtime": "^7.14.5",
        "@babel/preset-env": "^7.14.7",
        "@babel/preset-react": "^7.14.5",
        "@babel/preset-typescript": "^7.14.5",
        "@babel/runtime": "^7.14.6",
        "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
        "@types/mini-css-extract-plugin": "^2.0.0",
        "@types/react": "^17.0.13",
        "@types/react-dom": "^17.0.8",
        "@types/webpack": "^5.28.0",
        "@types/webpack-dev-server": "^3.11.5",
        "@typescript-eslint/eslint-plugin": "^4.28.2",
        "@typescript-eslint/parser": "^4.28.2",
        "babel-loader": "^8.2.2",
        "browserslist": "^4.16.6",
        "clean-webpack-plugin": "^4.0.0-alpha.0",
        "core-js": "^3.15.2",
        "cross-env": "^7.0.3",
        "css-loader": "^5.2.6",
        "eslint": "^7.30.0",
        "eslint-plugin-react": "^7.24.0",
        "eslint-plugin-react-hooks": "^4.2.0",
        "eslint-webpack-plugin": "^2.5.4",
        "fork-ts-checker-webpack-plugin": "^6.2.12",
        "html-webpack-plugin": "^5.3.2",
        "mini-css-extract-plugin": "^2.1.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "style-loader": "^3.0.0",
        "ts-node": "^10.0.0",
        "typescript": "^4.3.5",
        "webpack": "^5.42.1",
        "webpack-cli": "^4.7.2",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "clsx": "^1.1.1",
        "react-jss": "^10.7.1"
    }
}

我的 babel.config.json：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

我的 webpack 配置：

import path from "path";
import webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import ESLintPlugin from "eslint-webpack-plugin";

const config: webpack.Configuration | webpack.WebpackOptionsNormalized = {
  mode: "development",
  output: {
    publicPath: "/",
  },
  entry: ["./src/App/index.tsx"],
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ForkTsCheckerWebpackPlugin({
      async: false,
    }),
    new ESLintPlugin({
      extensions: ["js", "jsx", "ts", "tsx"],
    }),
  ],
  devtool: "inline-source-map",
  devServer: {
    contentBase: path.join(__dirname, "public"),
    historyApiFallback: true,
    port: 4000,
    open: true,
    hot: true,
  },
  target: ["es5", "web"],
};

export default config;

我的条目 index.tsx：

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import "core-js/stable";
import "regenerator-runtime/runtime";

const Root = (
    <App />
);

ReactDOM.render(Root, document.getElementById('root'));

其他几个问题：

1. 如果我尝试使用useBuiltIns: "usage" ，我真的需要将其包含在我的条目文件中吗？

import "core-js/stable";
import "regenerator-runtime/runtime";

2. 我需要像这样在 @babel/plugin-transform-runtime 中指定 corejs 吗？

  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]

标签： reactjswebpackbabel-loadercore-js