使用面向 IE11 的 babel 预设环境的 Webpack 生成无效的 Array.indexOf 函数

问题描述

所以我承认我对 webpack 有点陌生，所以如果这很明显，请原谅我，但我不太确定我做错了什么。我正在尝试切换到 Babel 的预设环境并针对 IE11，但是 IE 遇到了（它认为是）core-js 中的 Array.indexOf polyfill 的语法错误。具体来说，它会在它填充的任何输出文件中为这一行吐出“需要函数”错误：https://github.com/zloirock/core-js/blob/master/packages/core-js/modules/es.array.index-of.js#L15

考虑到 indexOf 可能是一个非常广泛使用的函数，我不得不想象这个问题在我的身边。

这是我的 webpack 配置：

const devCerts = require("office-addin-dev-certs");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const copyWebpackPlugin = require("copy-webpack-plugin");
const CustomFunctionsMetadataPlugin = require("custom-functions-Metadata-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');

var babelOptions = {"presets": [
  ["@babel/preset-env",{
  "corejs": 3,"debug": true,"modules": false,"spec": true,"targets": {
    "ie": "11"
  },"useBuiltIns": "usage"
}]
]
}


module.exports = async (env,options)  => {
  const dev = options.mode === "development";
  const config = {
    devtool: "source-map",entry: {
      vendor: [
        'core-js/stable','regenerator-runtime/runtime','react','react-dom','office-ui-fabric-react'
      ],taskpane: [
          'react-hot-loader/patch','./src/taskpane/index.tsx',],functions: "./src/functions/functions.ts",commands: './src/commands/commands.ts',redirect: './src/redirect/redirect.ts',callback: './src/callback/callback.ts',confirm: './src/dialog/confirm.tsx'
    },resolve: {
      extensions: [".ts",".tsx",".html",".js"]
    },module: {
      rules: [
        {
          test: /\.tsx?$/,exclude: '/node_modules/',use: [{
              loader: 'babel-loader',options: babelOptions
          },{
              loader: 'ts-loader'
          }
          ]
        },{
          test: /\.jsx?$/,use: [{
            loader: 'babel-loader',options: babelOptions
          }]
        },{
          test: /\.css$/,use: ['style-loader','css-loader']
        },{
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,use: {
              loader: 'file-loader',query: {
                  name: 'assets/[name].[ext]'
                }
              }  
            }   
          ]
    },plugins: [
      new CleanWebpackPlugin(),new CustomFunctionsMetadataPlugin({
        output: "functions.json",input: "./src/functions/functions.ts"
      }),new copyWebpackPlugin([
        {
          to: "taskpane.css",from: "./src/taskpane/taskpane.css"
        }
      ]),new ExtractTextPlugin('[name].[hash].css'),new HtmlWebpackPlugin({
        filename: "taskpane.html",template: './src/taskpane/taskpane.html',chunks: ['taskpane','functions','vendor',"commands",'polyfills']
      }),new HtmlWebpackPlugin({
        filename: "redirect.html",template: './src/redirect/redirect.html',chunks: ['redirect',new HtmlWebpackPlugin({
        filename: "callback.html",template: "./src/callback/callback.html",chunks: ["callback","pollyfills"]
      }),new HtmlWebpackPlugin({
        filename: "confirm.html",template: "./src/dialog/confirm.html",chunks: ["confirm",new HtmlWebpackPlugin({
          filename: "commands.html",template: "./src/commands/commands.html",chunks: ["commands"]
      }),new copyWebpackPlugin([
          {
              from: './assets',ignore: ['*.scss'],to: 'assets',}
      ])
    ],devServer: {
      hot: true,headers: {
        "Access-Control-Allow-Origin": "*"
      },https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),port: process.env.npm_package_config_dev_server_port || 3000,disableHostCheck: true
    }
  };

  return config;
};

很抱歉，这可能是一团糟。我试图弄乱一个本身就很挑剔的模板。

解决方法

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

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

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