javascript - attribute - title css
¿Cómo puedo rellenar la promesa con el paquete web? (7)
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?
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
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.
Mejor uso Bluebird
plugins: [
new webpack.ProvidePlugin({
Promise: ''bluebird''
}),
new webpack.NormalModuleReplacementPlugin(/es6-promise$/, ''bluebird''),
]
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''
})
]
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'']
};
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
.
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'']
};