使用babel-preset-env时，Babel不能进行多层填充获取

Question

我正在使用Webpack和巴别塔来构建和转换我的ES6代码。然而，在尝试支持较旧的浏览器时，我错过了重要的Polyfills。例如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"]
      }
    }]
  ]
}

首先，为什么不添加这种填充？其次，我如何添加它？我尝试将它添加到我的.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语言的转译和多层填充功能，它不像fetch那样处理web/浏览器规范。所以你不应该在Webpack中用巴别塔加载器加载它。

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

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

其中./src/yourapp.js应该是你的应用的入口点。我贴出这篇文章，以防有人遇到同样的问题，而其他解决方案不起作用。

Answer 3

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