Babel 7 preset-env useBuiltIns: "usage" 符号在 IE11 中是未定义的问题

编程问答 2022-04-21

问题描述

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

这是我的 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";
  1. 我需要像这样在@babel/plugin-transform-runtime 中指定 corejs 吗？
  "plugins": [
    [
      "@babel/plugin-transform-runtime",{
        "corejs": 3
      }
    ]
  ]

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babel-loadercore-jsreactjsreactjsreactjsreactjswebpackwebpackwebpack