javascript - attribute - title css

¿Cómo puedo rellenar la promesa con el paquete web?

Question

Estoy usando el paquete web para agrupar mi JavaScript. Depende de módulos como popsicle que usan any-promise .

Aquí está mi código:

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

Esto funciona bien en buscadores en los que Promise está disponible, pero IE 11 no proporciona Promise . Por lo tanto, quiero usar es6-promise como un polyfill.

Traté de agregar un ProvidePlugin explícito a mi webpack.config.js :

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

Pero sigo recibiendo el error en IE 11: any-promise browser requires a polyfill or explicit registration eg: require(''any-promise/register/bluebird'') .

Traté de adjuntar explícitamente un global:

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

Pero IE 11 da un error diferente: Object doesn''t support this action .

También intenté registrar explícitamente es6-promise:

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

Esto funciona, pero tengo que hacerlo en cada archivo que carga popsicle . Quiero adjuntar Promise a la window .

¿Cómo puedo garantizar window.Promise siempre está definido, usando webpack?

Completa demo de repo aquí .

Answer 1

Casi lo tienes: prueba esto en tu webpack.config.js :

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

Tenga en cuenta que deberá instalar imports-loader y exports-loader :

npm install --save imports-loader exports-loader

Answer 2

Con Webpack 2, así es como lo hice funcionar.

Primera instalación con npm install babel-polyfill . Comenzando con NPM 5 - --save se puede omitir.

Luego modifique la configuración del paquete web con:

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

Por supuesto, ./src/main.js es diferente para cada aplicación.

Answer 3

Mejor uso Bluebird

plugins: [
new webpack.ProvidePlugin({
Promise: ''bluebird''
}),
new webpack.NormalModuleReplacementPlugin(/es6-promise$/, ''bluebird''),
]

Answer 4

Opción que funcionó para mí. es6-promise-promise está diseñado para ser incluido directamente en las compilaciones de webpack. Asi que:

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

Answer 5

Para las personas que usan babel en combinación con la webpack: puedes usar babel-polyfill

Simplemente npm install --save "babel-polyfill" y luego agréguelo como punto de entrada en su webpack.config.js:

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

O bien, en lugar de utilizar todo el babel-polyfill, puede instalar core-js y hacer referencia solo al módulo que necesita.

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

Answer 6

Una versión actualizada y concisa de la respuesta de @asiniy usando la función de property recientemente agregada de ProvidePlugin , sin la necesidad de hacer referencia a es6-promise-promise :

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

Para que esto funcione, no te olvides de agregar es6-promise como una dependencia del proyecto en el que deseas rellenar Promise .

Answer 7

babel polyfill generalmente funciona, pero esta vez para un proyecto vuejs (webpack1), de alguna manera no funciona.

Afortunadamente, core-js funciona como un encanto.

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