Javascript 如何使用 webpack 填充 Promise？

How can I polyfill Promise with webpack?

提问by Wilfred Hughes

I'm using webpack to bundle up my JavaScript. I'm depending on modules like popsiclewhich use any-promise.

我正在使用 webpack 来捆绑我的 JavaScript。我依赖于像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 Promiseis available, but IE 11 does not provide Promise. So I want to use es6-promiseas a polyfill.

这在Promise可用的浏览器中工作正常，但IE 11 不提供 Promise。所以我想使用es6-promise作为polyfill。

I tried adding an explicit ProvidePluginto 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 e.g: require('any-promise/register/bluebird').

但我仍然在 IE 11: 中收到错误消息any-promise browser requires a polyfill or explicit registration e.g: 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. I want to just attach Promiseto window.

这有效，但我必须在每个加载popsicle. 我只想附加Promise到window.

How can I ensure window.Promiseis always defined, using webpack?

如何window.Promise使用 webpack确保始终定义？

Full repo demo here.

完整的回购演示在这里。

回答by Jeroen Pelgrims

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-jsand reference only the module you need.

或者，您可以core-js只安装和引用您需要的模块，而不是使用整个 babel-polyfill 。

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

回答by asiniy

Option that worked for me. es6-promise-promiseis designed to be included directly to the webpack builds. So:

对我有用的选项。es6-promise-promise旨在直接包含在 webpack 构建中。所以：

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

回答by staafl

An updated and concise version of @asiniy's answer using the recently added propertyfeature 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-promiseas a dependency of the project you want to polyfill Promisein.

为此，请不要忘记添加es6-promise作为要填充的项目的依赖项Promise。

回答by Ben

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']
};

回答by Alex Shwarc

Better use Bluebird

更好地使用蓝鸟

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

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

回答by Gabriel Florit

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-loaderand exports-loader:

请注意，您需要安装imports-loader和exports-loader：

npm install --save imports-loader exports-loader

npm install --save imports-loader exports-loader

回答by Pier

With Webpack 2 this is how I got it working.

使用 Webpack 2 这就是我让它工作的方式。

First install with npm install babel-polyfill. Starting with NPM 5 --savecan be omitted.

首先安装npm install babel-polyfill. 从 NPM 5 开始--save可以省略。

Then modify the webpack configuration with:

然后修改 webpack 配置：

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

Of course ./src/main.jsis different for every app.

当然./src/main.js每个应用程序都不同。

回答by Mario Pérez

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-polyfillor yarn add react-app-polyfill
• In your index.jsfile: import 'react-app-polyfill/ie11';

• npm install react-app-polyfill或者 yarn add react-app-polyfill
• 在您的index.js文件中：import 'react-app-polyfill/ie11';