web-dev-qa-db-fra.com

Comment polyfill Promise avec webpack?

J'utilise webpack pour regrouper mon code JavaScript. Je suis dépendant de modules tels que popsicle qui utilise any-promise .

Voici mon code:

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

Cela fonctionne bien dans les navigateurs où Promise est disponible, mais IE 11 ne fournit pas Promise . Donc, je veux utiliser es6-promise comme polyfill.

J'ai essayé d'ajouter une ProvidePlugin explicite à mon webpack.config.js:

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

Mais je reçois 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é de joindre explicitement un global:

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

Mais IE 11 donne une erreur différente: Object doesn't support this action.

J'ai aussi essayé explicitement d'enregistrer es6-promise:

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

Cela fonctionne, mais je dois le faire dans chaque fichier qui charge popsicle. Je veux simplement attacher Promise à window.

Comment puis-je m'assurer que window.Promise est toujours défini à l'aide de webpack?

Démo complète du repo ici .

javascriptwebpackinternet-explorer-11polyfills
32
Wilfred Hughes

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 ne faire référence qu'au module dont vous avez besoin.

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

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'
  })
]
18
asiniy

Une version mise à jour et concise de la réponse de @ asiniy à l'aide de la fonction property récemment ajoutée 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 en tant que dépendance du projet que vous souhaitez polyfiller Promise dans.

7
staafl

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']
};
4
Ben

Mieux utiliser Bluebird

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

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

Avec Webpack 2, voici comment je le fais fonctionner.

Commencez par installer avec npm install babel-polyfill. À partir de NPM 5, --save peut être omis.

Puis modifiez la configuration du webpack avec:

entry: {
  app: ['babel-polyfill', './src/main.js']
}

Bien sûr, ./src/main.js est différent pour chaque application.

1
Pier

Vous avez presque compris - essayez ceci dans votre webpack.config.js:

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

Notez que vous devrez installer imports-loader et exports-loader:

npm install --save imports-loader exports-loader

1
Gabriel Florit

Pour ceux qui utilisent CRA (create-react-app), vous pouvez utiliser le polyfill fourni par ceux-ci:

react-app-polyfill

  • npm install react-app-polyfill ou yarn add react-app-polyfill
  • Dans votre fichier index.js: import 'react-app-polyfill/ie11';
0
Mario Pérez