如何解决无法获取未定义的属性“绑定” Babel 7 + core-js + IE11

问题

我已经在使用react / typescript内置的实时聊天客户端上工作了一个月或两个月，它运行良好，但是我们需要增加对Internet Explorer 11的支持。

最初，在开发过程中，我使用Webpack作为构建系统，而当我使用Typescript时，我将所有内容都通过ts-loader。

由于需要支持Internet Explorer 11，因此我决定更改为babel 7，因为现在有很好的打字稿支持。我希望使用babel来填充IE11。

我相信我已经遵循the project setup guide via babel docs。但是，当在虚拟机中的IE11中测试项目时，我仍然收到以下错误：

无法获取未定义或空引用的属性“绑定”。

如果我扩展错误，则似乎是在文件中绊倒了名为load-script的依赖项。

它在所有其他现代浏览器（包括Edge）中仍然可以完美运行，似乎IE11出现了问题。

我不确定，但是似乎对node_modules没做任何事情。

关于安装程序的信息（我将在下面提供文件摘要）：

因为我使用的是babel 7，所以我不需要使用@babel/polyfill，而是使用了core-js@3.6.5
我正在将core-js和regenerator-runtime/runtime导入到路由文件中。（尽管在babel env配置中运行debug: true时，由于使用了useBuiltIns: usage。）

我试图做的事情

在检查开发人员工具中的错误时，我已将问题追溯到它抱怨的不同依赖项，注释了导入并暂时卸载了。然后，它抱怨另一个模块。

这给我的印象是它不能处理导入的依赖项。因此，我尝试从exclude: /node_modules/中删除webpack.config.js。

代码示例

package.json

  {
  "name": "@rradar/chat-client","version": "2.2.9","description": "","main": "dist/main.js","scripts": {
    "test": "jest --no-cache || true","watch": "webpack --watch --mode development","build": "webpack --mode production","prettier:base": "prettier --parser typescript --single-quote","prettier:check": "npm run prettier:base -- --list-different \"src/**/*.{ts,tsx}\"","prettier:write": "npm run prettier:base -- --write \"src/**/*.{ts,tsx}\""
  },"bugs": {
    "url": "https://git.rradar.com/npm-packages/chat-client/issues","email": "adam.bowers@rradar.com"
  },"repository": {
    "type": "git","url": "https://git.rradar.com/npm-packages/chat-client"
  },"author": "rradar Limited","license": "ISC","contributors": [
    {
      "name": "Adam Bowers","email": "adam.bowers@rradar.com"
    },{
      "name": "Tom Hughes","email": "tom.hughes@rradar.com"
    }
  ],"jest": {
    "setupFiles": [
      "<rootDir>/config/test.setup.js"
    ],"moduleNameMapper": {
      ".scss$": "<rootDir>/config/SCSsstub.js"
    },"modulefileExtensions": [
      "ts","tsx","js"
    ],"transform": {
      "^.+\\.(ts|tsx)$": "<rootDir>/config/test.preprocess.js"
    },"testMatch": [
      "**/__tests__/*.(ts|tsx|js)"
    ]
  },"dependencies": {
    "@babel/polyfill": "^7.12.1","@fortawesome/fontawesome": "^1.1.8","@fortawesome/fontawesome-free-solid": "^5.0.13","@fortawesome/fontawesome-svg-core": "^1.2.2","@fortawesome/react-fontawesome": "^0.1.0","@rradar/grace-api": "^2.2.3","classnames": "^2.2.6","core-js": "^3.6.5","css-loader": "^1.0.0","date-fns": "^1.29.0","es6-promise": "^4.2.4","file-loader": "^1.1.11","howler": "^2.0.14","js-cookie": "^2.2.0","lodash.clonedeep": "^4.5.0","mo-js": "^0.288.2","node-sass": "^4.14.1","pulltorefreshjs": "^0.1.14","pusher-js": "^4.2.2","react-html-parser": "^2.0.2","react-player": "^2.6.2","react-redux": "^6.0.0","redux": "^4.0.0","resolve-url-loader": "^2.3.0","uuid": "^8.2.0"
  },"peerDependencies": {
    "react": "^16.4.1","react-dom": "^16.4.1","lodash.clonedeep": "^4.5.0"
  },"devDependencies": {
    "@babel/cli": "^7.12.1","@babel/core": "^7.12.3","@babel/plugin-proposal-class-properties": "^7.12.1","@babel/preset-env": "^7.12.1","@babel/preset-react": "^7.12.1","@babel/preset-typescript": "^7.12.1","@types/classnames": "^2.2.7","@types/cordova": "0.0.34","@types/enzyme-adapter-react-16": "^1.0.2","@types/howler": "^2.0.5","@types/jest": "^23.3.0","@types/js-cookie": "^2.1.0","@types/lodash.clonedeep": "^4.5.3","@types/node": "^10.5.2","@types/pulltorefreshjs": "^0.1.2","@types/pusher-js": "^4.2.0","@types/react": "^16.9.36","@types/react-dom": "^16.0.6","@types/react-fontawesome": "^1.6.3","@types/react-html-parser": "^2.0.1","@types/react-redux": "^7.1.9","@types/react-test-renderer": "^16.0.1","@types/uuid": "^8.0.0","@types/window-or-global": "^1.0.0","awesome-typescript-loader": "^5.2.1","babel-loader": "^8.1.0","enzyme": "^3.3.0","enzyme-adapter-react-16": "^1.1.1","jest": "^23.4.1","jsdoc": "^3.5.5","minami": "^1.2.3","prettier": "^1.13.7","react": "^16.4.1","react-test-renderer": "^16.4.1","sass-loader": "^7.0.3","style-loader": "^0.21.0","stylelint": "^9.3.0","stylelint-order": "^0.8.1","ts-jest": "^23.0.1","ts-loader": "^4.5.0","tslint": "^5.11.0","tslint-react": "^3.6.0","typescript": "^3.2.2","url-loader": "^1.0.1","webpack": "^4.43.0","webpack-bundle-analyzer": "^3.8.0","webpack-cli": "^3.3.11","webpack-strip-block": "^0.2.0"
  }
}

babel.config.json

{
  "presets": [
    [
      "@babel/env",{
        "targets": {
          "chrome": "58","ie": "11"
        },"useBuiltIns": "usage","corejs": {"version": "3.6.5","proposals": true},"debug": true
      }
    ],"@babel/preset-react",[
      "@babel/preset-typescript",{
        "isTSX": true,"allExtensions": true
      }
    ]
  ],"plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

Webpack配置

const path = require('path');

module.exports = (env,{ mode }) => {
  const useBundleAnalyzerPlugin = mode !== 'production' || (env && env.local);

  if (useBundleAnalyzerPlugin) {
    BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
      .BundleAnalyzerPlugin;
  }

  return {
    output: {
      path: path.resolve(__dirname,'dist'),publicPath: '/',library: 'ChatClient',libraryTarget: 'amd',},optimization: {
      usedExports: true,devtool: 'source-map',externals: {
      lodash: 'lodash',react: 'react',reactDOM: 'react-dom',module: {
      rules: [
        {
          test: /\.tsx?$/,use: 'babel-loader'
        },{
          test: /\.(png|svg|jpg)$/,use: [
            {
              loader: 'file-loader',options: {
                emitFile: true,name: 'images/[name].[ext]',],{
          test: /\.(mp3)$/,use: [
            {
              loader: 'url-loader',options: {
                limit: 20000,fallback: 'file-loader',exclude: /node_modules/,{
          test: /\.scss$/,use: [
            { loader: 'style-loader' },{ loader: 'css-loader' },{ loader: 'resolve-url-loader' },{ loader: 'sass-loader?sourceMap' },{
          test: /\.tsx|.ts$/,enforce: 'pre',exclude: /(node_modules|bower_components|\.spec\.js)/,use: [{ loader: 'webpack-strip-block' }],resolve: {
      extensions: ['.tsx','.ts','.js'],alias: {
        'chat-client': path.resolve(__dirname,'../module/dist/main.js'),assets: path.resolve(__dirname,'src/assets'),symlinks: true,plugins: [
      ...(useBundleAnalyzerPlugin
        ? [
            new BundleAnalyzerPlugin({
              openAnalyzer: true,}),]
        : []),};
};

解决方法

我如何解决此问题

与同事交谈后，似乎他们过去也遇到过类似的问题。通过将以下内容导入根文件来解决此问题。

请记住您必须先安装这些软件。

import 'promise-polyfill/src/polyfill';
import 'whatwg-fetch';

或者，您可以避免完全将导入添加到代码中，而Webpack可以使用Babel来解决这一问题。我建议使用这种方法，它将自动检测并处理所有需要使用polyfill的功能。这样一来，您就无需显式和手动地标识每个polyfill并将其包含在代码库中：

How to create IE11 Bundles with Webpack 5 and Babel 7