Webpack 使用Babel预设环境时，Babel不进行多边形填充提取

我正在使用Webpack和Babel构建和传输我的ES6代码。但是，在尝试支持旧浏览器时，我缺少重要的多边形填充。e、 g第8条

这是我的Webpack.config

const versions = {
  v1: './src/js/v1.js',
  v2: './src/js/v2.js',
  v3: './src/js/v3.js',
};

module.exports = {
  entry: versions,
  output: {
    path: __dirname + '/dist',
    filename: '[name].min.js'
  },
  externals: {
    'jquery': 'jQuery'
  },
  module: {
    loaders: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader',
      }, {
        test: /\.hbs$/,
        loader: 'handlebars-loader',
      }
    ]
  }
}

和我的

.babelrc

文件：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 3 versions", "iOS >= 8"]
      }
    }]
  ]
}

首先，为什么不添加这种聚填料？第二，我如何添加它？我尝试将此添加到我的

.babelrc

“插件”：[“whatwg fetch”]

，但运气不好

我相信我可以将它添加到我的Webpack配置的条目中，但这在我的实例中不起作用，因为我有多个脚本要分别构建

---

提前感谢您的帮助。我的头发越来越少了，这让我特别感激

您可以在

webpack.config.js

文件中添加

fetch

的分辨率

new webpack.ProvidePlugin({
  'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
})

在

插件

部分中。

---

之后，在代码中，只需使用

fetch

。你根本不需要导入它。当然，您需要

导入加载程序

和

导出加载程序

Babel不为web规范添加polyfill。您只能使用polyfills来实现列出的ECMAScript方案。它需要手动实现。或者可以使用其他替代方案

首先，您尝试为web/DOM标准添加polyfill，而不是JS polyfill。Babel只处理标准ECMAScript语言功能的transpiling和polyfilling，它不处理web/浏览器规范，如

fetch

。所以你不应该用网页中的babel加载程序来加载它

我自己也尝试过这里提供的其他解决方案，但它们都不再有效。对我有效的方法是简单地安装包

npm i whatwg fetch--save dev

，然后将其添加到

entry

配置选项字段中，如下所示：

module.exports = {
  entry: ["whatwg-fetch", "./src/yourapp.js"]
}

其中

/src/yourapp.js

应该是应用程序的入口点。

---

我将发布此消息，以防有人遇到相同的问题，而其他解决方案将不起作用。

在我的案例中，错误是ReferenceError:fetch未定义

我在firebase上使用全局和服务器渲染时出错，根据一些解决方案，我最终在webpack中添加了一个插件 然后，我在“multi…”类型中出现了一系列错误，基本上就是该库有多个定义

    new webpack.ProvidePlugin({
           Promise: 'es6-promise',
           fetch: 'imports-loader?this=>global!exports-loader?exports!global.fetch!whatwg-fetch',}),
  

最后在解决部分

mainFields: ['main']

---

谢谢安装这些库并添加建议的代码后，我发现

模块未找到：错误：无法解析'/Users/..

中的'imports loader'，如上所述，您必须拥有这些模块。您安装了吗？：）<代码>npm i--保存开发导入加载程序导出加载程序。另外，您的网页是否正在解析

node\u modules

文件夹中的模块？是的，已安装。并且刚刚在我的配置中添加了

resolve:{modules:['node_modules'，}

，但仍然得到相同的错误：/whatwg fetch在

3.0.0时出现问题。解决方法（如中所建议）是将上面建议的行替换为：
fetch:'exports loader？self.fetch！whatwg fetch/dist/fetch.umd'
这些解决方案都不再适合我了。我得到一个
ValidationError:无效的选项对象。导出加载程序已使用与API架构不匹配的选项对象初始化。
错误。问题很好。我最后还导入了
whatwg fetch
模块来解决这个问题，但是将polyfill作为Babel的一部分会更方便。感谢您发布答案！这对我有用！我正在使用firebase和electron react应用程序。我遇到了“主进程中未定义获取”错误。我必须删除您答案中的“承诺：es6承诺”部分才能使其生效。需要将'mainFields:['main']'添加到网页配置的'resolve'部分。希望这个答案能帮助其他人。我在使用rollup.js时遇到了类似的问题。可以解释这个主字段是什么，以及为什么它可以解决获取错误