Как я могу polyfill обещать с помощью webpack?

Я использую webpack для сборки своего JavaScript. Я в зависимости от модулей, таких как popsicle, которые используют any-promise.

Здесь мой код:

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-обещание:

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

Это работает, но я должен сделать это в каждом файле, который загружает popsicle. Я хочу просто прикрепить Promise к window.

Как я могу гарантировать, что window.Promise всегда определен, используя webpack?

Демоверсия полного репо здесь.

Ответ 1

Для пользователей, использующих babel в сочетании с webpack: вы можете использовать babel- polyfill

Просто сделайте npm install --save "babel-polyfill", а затем добавьте его как точку входа в свой webpack.config.js:

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

Или вместо использования всего babel- polyfill вы можете установить core-js и указать только тот модуль, который вам нужен.

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

Ответ 2

Вариант, который работал у меня. es6-promise-promise предназначен для непосредственного включения в сборку webpack. Итак:

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

Ответ 3

babel polyfill обычно работает, но на этот раз для проекта vuejs (webpack1), как-то не работает.

К счастью, core-js работает как прелесть.

npm install core-js --save

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

Ответ 4

Вы почти получили его - попробуйте это в 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

Ответ 5

Лучше использовать Bluebird

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

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

Ответ 6

С помощью Webpack 2 я понял, как это работает.

Сначала установите npm install babel-polyfill. Начиная с NPM 5 --save можно опустить.

Затем измените конфигурацию webpack с помощью:

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

Конечно, ./src/main.js отличается для каждого приложения.