我如何用webpack填充Promise？

Question

我正在使用webpack捆绑我的JavaScript.我依赖于使用任何承诺的冰棒等模块.

这是我的代码:

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

这在Promise可用的浏览器中工作正常,但IE 11不提供Promise.所以我想使用es6-promise作为polyfill.

我尝试添加一个明确的ProvidePlugin给我webpack.config.js:

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');

但IE 11给出了一个不同的错误:Object doesn't support this action.

我也尝试过明确注册es6-promise:

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

这有效,但我必须在每个加载的文件中执行此操作popsicle.我想Promise加入window.

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

这里有完整的回购演示.

Answer 1

对于将babel与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/fn/promise', './app/js']
};

Answer 2

对我有用的选择.es6-promise-promise旨在直接包含在webpack构建中.所以:

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

Answer 3

使用最近添加@ asiniy的答案的更新和简洁版本property的功能ProvidePlugin,而不需要参考es6-promise-promise:

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

为此,请不要忘记添加es6-promise为要填充的项目的依赖项Promise.

Answer 4

babel polyfill usually works, but this time for a vuejs(webpack1) project, somehow not working.

Fortunately, core-js works as a charm.

npm install core-js --save

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

Answer 5

更好地使用蓝鸟

plugins: [
  new webpack.ProvidePlugin({
    Promise: 'bluebird'
  }),

  new webpack.NormalModuleReplacementPlugin(/es6-promise$/, 'bluebird'),
]

Answer 6

你几乎明白了 - 在你的webpack.config.js：

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

请注意，您需要安装imports-loader并且exports-loader：

npm install --save imports-loader exports-loader