wake-up-neo.com

Wie kann ich mit Webpack versprechen?

Ich verwende Webpack, um mein JavaScript zu bündeln. Ich bin abhängig von Modulen wie popsicle , die Any-Promise verwenden.

Hier ist mein Code:

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

Dies funktioniert gut in Browsern, in denen Promise verfügbar ist, aber IE 11 nicht Promise bietet. Ich möchte also es6-promise als Polyfill verwenden.

Ich habe versucht, eine explizite ProvidePlugin zu meinem webpack.config.js hinzuzufügen:

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

Ich bekomme aber immer noch den Fehler in IE 11: any-promise browser requires a polyfill or explicit registration e.g: require('any-promise/register/bluebird').

Ich habe explizit versucht, ein globales anzufügen:

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

IE 11 gibt jedoch einen anderen Fehler aus: Object doesn't support this action.

Ich habe auch versucht, es6-promise explizit zu registrieren:

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

Das funktioniert, aber ich muss es in jeder einzelnen Datei tun, die popsicle lädt. Ich möchte nur Promise an window anhängen.

Wie kann ich sicherstellen, dass window.Promise immer mithilfe von Webpack definiert wird?

Vollständige Repo-Demo hier .

javascriptwebpackinternet-explorer-11polyfills
32
Wilfred Hughes

Für Benutzer, die Babel in Kombination mit Webpack verwenden: Sie können Babel-Polyfill verwenden.

Machen Sie einfach npm install --save "babel-polyfill" und fügen Sie ihn als Einstiegspunkt in Ihre webpack.config.js ein:

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

Anstatt den gesamten Babel-Polyfill zu verwenden, können Sie core-js installieren und nur auf das Modul verweisen, das Sie benötigen.

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

Option, die für mich funktioniert hat. es6-Versprechen-Versprechen soll direkt in die Webpack-Builds aufgenommen werden. So:

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

Eine aktualisierte und präzise Version von @ asiniys Antwort mit der kürzlich hinzugefügten property-Funktion von ProvidePlugin , ohne auf es6-promise-promise verweisen zu müssen:

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

Damit dies funktioniert, vergessen Sie nicht, es6-promise als Abhängigkeit des Projekts hinzuzufügen, in das Sie Promise polyfillen möchten.

7
staafl

babel polyfill funktioniert normalerweise, aber diesmal für ein vuejs (webpack1) -Projekt, das irgendwie nicht funktioniert. 

Glücklicherweise wirkt core-js als Charme.

npm install core-js --save

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

Verwenden Sie besser Bluebird

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

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

Mit Webpack 2 habe ich es so zum Laufen gebracht.

Zuerst mit npm install babel-polyfill installieren. Ab NPM 5 kann --save weggelassen werden.

Dann ändern Sie die Webpack-Konfiguration mit:

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

Natürlich unterscheidet sich ./src/main.js für jede App.

1
Pier

Sie haben es fast geschafft - versuchen Sie es in Ihrem webpack.config.js:

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

Beachten Sie, dass Sie imports-loader und exports-loader installieren müssen:

npm install --save imports-loader exports-loader

1
Gabriel Florit

Für diejenigen, die CRA (Create-React-App) verwenden, können Sie die von ihnen bereitgestellte Polyfill verwenden:

reag-app-polyfill

  • npm install react-app-polyfill oder yarn add react-app-polyfill
  • In Ihrer index.js-Datei: import 'react-app-polyfill/ie11';
0
Mario Pérez