使用 babel-preset-env 时，Babel 不是 Polyfilling Fetch

Question

我正在使用 Webpack 和 Babel 来构建和转译我的 ES6 代码。但是，在尝试支持旧版浏览器时，我缺少重要的 Polyfill。例如 iOS8。

这是我的 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"]
      }
    }]
  ]
}

首先，为什么不添加这个 Polyfill？其次，我该如何添加它？我尝试将其添加到我的 .babelrc "plugins": ["whatwg-fetch"] 中，但没有成功。

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

提前感谢您的帮助。我的头发越来越少，特别感谢！

Answer 1

您可以在webpack.config.js 文件中添加fetch 的分辨率。

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

在您的 plugins 部分中。 之后，在您的代码中，只需使用fetch。您不需要导入它。当然，你需要imports-loader和exports-loader。

Answer 2

首先，您尝试为 web/DOM 标准添加 polyfill，而不是 JS polyfill。 Babel 仅处理标准 ECMAScript 语言功能的转译和填充，它不处理 Web/浏览器规范，例如 fetch。所以你不应该用 Webpack 中的 babel loader 来加载它。

我自己尝试过这里提供的其他解决方案，但它们都不再有效。对我有用的只是安装包 npm i whatwg-fetch --save-dev 然后将其添加到 entry 配置选项字段中，如下所示：

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

./src/yourapp.js 应该是您应用的入口点。 我发布这个以防有人遇到同样的问题而其他解决方案不起作用。

Answer 3

Babel 不会为 web 规范添加 polyfill。您只能使用 polyfill 来实现 ECMAScript 的 here 提案。它需要手动实现。可以使用Github's fetch polyfill 或其他替代方法。

Answer 4

在我的例子中，错误是 ReferenceError: fetch is not defined

我在使用全局 this 和服务器渲染的 firebase 上遇到错误，经过一些解决方案，我最终在 webpack 中添加了一个插件 然后重建我以“multi ...”类型的一堆错误结束，这些错误基本上是该库有多个定义

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

终于在解决部分

mainFields: ['main']