如何为IE11正确使用babel / corejs3 / webpack?

问题描述 投票:0回答:1

使用我当前的配置(请参见下文),我收到此错误:

   [object Error]{description: "Argument ob...", message: "Argument ob...", name: "TypeError", number: -2147418113, stack: "TypeError: ...", Symbol()_7.bs7gi3oa3wi: undefined}

我尝试根据Symbol()_ ... : undefined}进行挖掘,但找不到任何明确的迹象。

这是我的.babel.config.js

module.exports = function (api) {
    api.cache(true);
    const presets = [
      [
        '@babel/preset-env',
        {
         // modules: false,
          corejs:"3.6.4",
          useBuiltIns: 'usage',
          targets: {
            browsers: [
              "edge >= 16",
              "safari >= 9",
              "firefox >= 57",
              "ie >= 11",
              "ios >= 9",
              "chrome >= 49"
            ]
          }
        }
      ]
    ];
    const plugins= [
        ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ];
    return {
      presets,
      plugins
    }
  }

这是我的webpackconfig.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
       // exclude: /node_modules/,
       exclude : [
        /\bcore-js\b/,
        /\bwebpack\/buildin\b/
      ],
        use: {
          loader: 'babel-loader',
          options:{
            sourceType: "unambiguous"
          }
        },
      },
    ],
  },
  devtool:"cheap-source-map",
  resolve: {
    extensions: ['*', '.js'],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'shim.js',
  }
};

我也尝试了许多替代方法,这是我目前的替代方法,使用entry:"usage",但不排除node_modules

使用最新的babel 7.x,最新的core-js 3和最新的webpack 4.x

[错误似乎来自Postmate库的首次调用,即new Postmate({...})(我之前有一个console.log)。在我打电话给localforage并成功完成诺言之前。

javascript webpack internet-explorer-11 babeljs core-js
1个回答
0
投票

[您可能缺少一些导入,我建议您查看IE11支持下的react-app-polyfills导入-错误消息与Symbol相关。 core-js>=3不再使用core-js/stable导入IE11所需的所有内容。在撰写本文时,这可能就足够了:

// If  you need `fetch` or `Object.assign`
npm install whatwg-fetch object-assign
// Make sure we're in a Browser-like environment before importing polyfills
// This prevents `fetch()` from being imported in a Node test environment
if (typeof window !== 'undefined') {
  // fetch() polyfill for making API calls.
  require('whatwg-fetch');
}

// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');

/// This may rid you of your error message

// Support for...of (a commonly used syntax feature that requires Symbols)
require('core-js/features/symbol');
// Support iterable spread (...Set, ...Map)
require('core-js/features/array/from');

希望这会有所帮助

© www.soinside.com 2019 - 2024. All rights reserved.