[英]How can I polyfill Promise with webpack?
I'm using webpack to bundle up my JavaScript.我正在使用 webpack 来捆绑我的 JavaScript。 I'm depending on modules like popsicle which use any-promise .
我依赖于像popsicle这样使用any-promise 的模块。
Here's my code:这是我的代码:
var popsicle = require('popsicle');
popsicle.get('/').then(function() {
console.log('loaded URL');
});
This works fine in browsers where Promise
is available, but IE 11 does not provide Promise .这在
Promise
可用的浏览器中工作正常,但IE 11 不提供 Promise 。 So I want to use es6-promise as a polyfill.所以我想使用es6-promise作为polyfill 。
I tried adding an explicit ProvidePlugin
to my webpack.config.js
:我尝试添加一个明确的
ProvidePlugin
我webpack.config.js
:
plugins: [
new webpack.ProvidePlugin({
'Promise': 'exports?global.Promise!es6-promise'
})
]
But I still get the error in IE 11: any-promise browser requires a polyfill or explicit registration eg: require('any-promise/register/bluebird')
.但我仍然在 IE 11 中遇到错误:
any-promise browser requires a polyfill or explicit registration eg: require('any-promise/register/bluebird')
。
I tried explicitly attaching a global:我尝试明确附加一个全局:
global.Promise = global.Promise || require('es6-promise');
But IE 11 gives a different error: Object doesn't support this action
.但是 IE 11 给出了一个不同的错误:
Object doesn't support this action
。
I also tried explicitly registering es6-promise:我还尝试明确注册 es6-promise:
require('any-promise/register/es6-promise');
var popsicle = require('popsicle');
This works, but I have to do it in every single file that loads popsicle
.这有效,但我必须在加载
popsicle
每个文件中执行此操作。 I want to just attach Promise
to window
.我只想将
Promise
附加到window
。
How can I ensure window.Promise
is always defined, using webpack?我如何才能确保
window.Promise
总是被定义,使用的WebPack?
For people using babel in combination with webpack: you can use babel-polyfill对于将 babel 与 webpack 结合使用的人:您可以使用babel-polyfill
Just do npm install --save "babel-polyfill"
and then add it as an entry point in your webpack.config.js:只需执行
npm install --save "babel-polyfill"
然后将其添加为 webpack.config.js 的入口点:
module.exports = {
entry: ['babel-polyfill', './app/js']
};
Or, instead of using the entire babel-polyfill you can install core-js
and reference only the module you need.或者,您可以安装
core-js
并仅引用您需要的模块,而不是使用整个 babel-polyfill。
module.exports = {
entry: ['core-js/stable/promise', './app/js']
};
Option that worked for me.对我有用的选项。 es6-promise-promise is designed to be included directly to the webpack builds.
es6-promise-promise旨在直接包含在 webpack 构建中。 So:
所以:
plugins: [
new webpack.ProvidePlugin({
Promise: 'es6-promise-promise'
})
]
An updated and concise version of @asiniy's answer using the recently added property
feature of ProvidePlugin , without the need to reference es6-promise-promise
:使用最近添加@ asiniy的答案的更新和简洁版
property
的特点ProvidePlugin ,而不需要参考es6-promise-promise
:
new webpack.ProvidePlugin({
Promise: ['es6-promise', 'Promise']
})
For this to work don't forget to add es6-promise
as a dependency of the project you want to polyfill Promise
in.为此,请不要忘记将
es6-promise
添加为要在其中es6-promise
Promise
的项目的依赖项。
babel polyfill usually works, but this time for a vuejs(webpack1) project, somehow not working. babel polyfill 通常有效,但这次对于 vuejs(webpack1) 项目,不知何故不起作用。
Fortunately, core-js works as a charm.幸运的是,core-js 很有魅力。
npm install core-js --save
module.exports = {
entry: ['core-js/fn/promise', './app/js']
};
Better use Bluebird更好地使用蓝鸟
plugins: [
new webpack.ProvidePlugin({
Promise: 'bluebird'
}),
new webpack.NormalModuleReplacementPlugin(/es6-promise$/, 'bluebird'),
]
You almost got it - try this in your webpack.config.js
:你几乎明白了 - 在你的
webpack.config.js
试试这个:
plugins: [
new webpack.ProvidePlugin({
Promise: 'imports?this=>global!exports?global.Promise!es6-promise'
})
]
Note that you will need to install imports-loader
and exports-loader
:请注意,您需要安装
imports-loader
和exports-loader
:
npm install --save imports-loader exports-loader
With Webpack 2 this is how I got it working.使用 Webpack 2 这就是我让它工作的方式。
First install with npm install babel-polyfill
.首先使用
npm install babel-polyfill
。 Starting with NPM 5 --save
can be omitted.从 NPM 5 开始
--save
可以省略。
Then modify the webpack configuration with:然后修改 webpack 配置:
entry: {
app: ['babel-polyfill', './src/main.js']
}
Of course ./src/main.js
is different for every app.当然
./src/main.js
对于每个应用程序都是不同的。
For those using CRA (create-react-app) you could use the polyfill they provide:对于那些使用 CRA (create-react-app) 的人,你可以使用他们提供的 polyfill:
react-app-polyfill react-app-polyfill
npm install react-app-polyfill
or yarn add react-app-polyfill
npm install react-app-polyfill
或yarn add react-app-polyfill
index.js
file: import 'react-app-polyfill/ie11';
index.js
文件中: import 'react-app-polyfill/ie11';
In webpack after optimization from babel-polyfill to core-js's promise the code:在 webpack 中从 babel-polyfill 优化到 core-js 的 promise 后的代码:
import 'core-js/library/es6/promise';
does not works.不起作用。
But after changing code to:但是在将代码更改为:
import 'core-js/features/promise';
it works.它有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.