使用babel-preset-env时,Babel not 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

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

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您的应用程序的入口点应该在哪里。我发布此内容是为了防止有人遇到同样的问题并且其他解决方案不起作用。