我怎样才能和webpack多履行诺言？

Question

我正在用webpack捆绑我的JavaScript。我依赖于像popsicle这样使用any-promise的模块。

下面是我的代码：

var popsicle = require('popsicle');
popsicle.get('/').then(function() {
  console.log('loaded URL');
});

这在Promise可用的浏览器中工作得很好，但是IE 11 does not provide Promise。因此，我想使用es6-promise作为多边形填充。

我尝试向我的webpack.config.js添加一个显式的ProvidePlugin

plugins: [
  new webpack.ProvidePlugin({
    'Promise': 'exports?global.Promise!es6-promise'
  })
]

但我仍然在IE 11中得到错误：any-promise browser requires a polyfill or explicit registration e.g: require('any-promise/register/bluebird')。

我尝试显式地附加一个全局变量：

global.Promise = global.Promise || require('es6-promise');

但是IE11给出了一个不同的错误：Object doesn't support this action。

我还尝试显式注册es6-promise：

require('any-promise/register/es6-promise');
var popsicle = require('popsicle');

这是可行的，但我必须在加载popsicle的每个文件中执行此操作。我只想将Promise附加到window。

使用webpack，我如何确保始终定义window.Promise window.Promise？

Full repo demo here。

Answer 1

对于使用巴别塔和webpack的人:你可以使用babel-polyfill

只需执行npm install --save "babel-polyfill"，然后将其添加为webpack.config.js中的入口点：

module.exports = {
   entry: ['babel-polyfill', './app/js']
};

或者，您可以安装core-js并只引用您需要的模块，而不是使用整个babel-polyfill。

module.exports = {
   entry: ['core-js/stable/promise', './app/js']
};

Answer 2

对我来说很有效的选择。es6-promise-promise被设计为直接包含在webpack的构建中。所以：

plugins: [
  new webpack.ProvidePlugin({
    Promise: 'es6-promise-promise'
  })
]

Answer 3

使用最近添加的ProvidePlugin的property功能的@asiniy答案的更新和简明版本，而不需要引用es6-promise-promise

    new webpack.ProvidePlugin({
        Promise: ['es6-promise', 'Promise']
    })

为了让它起作用，不要忘了添加es6-promise作为您想要多填充Promise的项目的依赖项。