Comment polyfill Promise avec webpack?

Question

Je suis en utilisant webpack à s'emmitoufler mon JavaScript. Je suis en fonction des modules comme popsicle qui utilisent tout-promesse.

Voici mon code:

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

Cela fonctionne bien dans les navigateurs Promise est disponible, mais IE 11 ne fournit pas de Promesse. Je tiens donc à utiliser es6-la promesse comme un polyfill.

J'ai essayé d'ajouter explicitement ProvidePlugin mon webpack.config.js:

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

Mais j'ai toujours l'erreur dans IE 11: any-promise browser requires a polyfill or explicit registration e.g: require('any-promise/register/bluebird').

J'ai essayé explicitement de la fixation d'un mondial:

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

Mais IE 11 donne une autre erreur: Object doesn't support this action.

J'ai aussi essayé explicitement l'inscription es6-la promesse:

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

Cela fonctionne, mais je dois le faire dans tous les fichier qui se charge popsicle. Je veux juste l'attacher Promise de window.

Comment puis-je garantir window.Promise est toujours défini, à l'aide de webpack?

Plein pensions de démo ici.

Answer 1

Pour les personnes utilisant babel en combinaison avec webpack: vous pouvez utiliser babel-polyfill

Il suffit de faire npm install --save "babel-polyfill" puis de l’ajouter comme point d’entrée dans votre webpack.config.js:

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

Ou, au lieu d'utiliser l'intégralité de babel-polyfill, vous pouvez installer core-js et référencer uniquement le module dont vous avez besoin.

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

Answer 2

Option qui a fonctionné pour moi. es6-promise-promise est conçu pour être inclus directement dans les versions de Webpack. Alors:

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

Answer 3

Une version mise à jour et concise de la réponse de @ asiniy à l'aide de la fonction property ajoutée récemment de ProvidePlugin , sans qu'il soit nécessaire de faire référence à es6-promise-promise :

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

Pour que cela fonctionne, n'oubliez pas d'ajouter es6-promise tant que dépendance du projet que vous souhaitez polyfiller Promise dans.

Answer 4

babel polyfill fonctionne généralement, mais cette fois pour un projet vuejs (webpack1), ne fonctionnant pas.

Heureusement, core-js fonctionne comme un charme.

 npm install core-js --save

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

Answer 5

Mieux utiliser Bluebird

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

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