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语言功能的转码和填充，而不处理{/ {1}}之类的Web /浏览器规范。因此，您不应使用Webpack中的babel加载器来加载它。

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

entry

module.exports = { entry: ["whatwg-fetch", "./src/yourapp.js"] }应该是应用程序的入口。我发布此消息是为了防止有人遇到相同的问题而其他解决方案无法正常工作。

Answer 3

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

Answer 4

在我的情况下，错误是ReferenceError：未定义获取

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

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

“最终解决”部分

mainFields: ['main']

使用babel-preset-env时，Babel not Polyfilling Fetch

4 个答案: