Question

我正在使用webpack捆绑我的JavaScript。我取决于使用popsicle的any-promise等模块。

这是我的代码：

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

这适用于Promise可用的浏览器，但IE 11 does not provide 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-promise：

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

这样可行，但我必须在加载popsicle的每个文件中执行此操作。我想将Promise附加到window。

如何确保始终使用网络包定义window.Promise？

Full repo demo here

Answer 1

对于将babel与webpack结合使用的人：您可以使用babel-polyfill

只需执行npm install --save "babel-polyfill"，然后将其添加为webpack.config.js中的入口点：

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

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

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

Answer 2

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

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

Answer 3

使用ProvidePlugin最近添加的property功能的@ asiniy答案的更新和简洁版本，无需引用es6-promise-promise：

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

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

Answer 4

babel polyfill通常可以正常工作，但这次是针对vuejs（webpack1）项目，不知何故不起作用。

幸运的是，core-js是一种魅力。

npm install core-js --save

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

Answer 5

更好地使用Bluebird

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

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

Answer 6

你几乎得到了它 - 在你的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

Answer 7

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

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

然后使用以下命令修改webpack配置：

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

当然./src/main.js对于每个应用都是不同的。

Answer 8

对于使用CRA（create-react-app）的用户，可以使用他们提供的polyfill：

Answer 9

从babel-polyfill到core-js的优化后的webpack中，代码如下：

import 'core-js/library/es6/promise';

不起作用。

但是将代码更改为：

import 'core-js/features/promise';

有效。