web-dev-qa-db-ja.com

Promiseをwebpackでポリフィルするにはどうすればよいですか？

JavaScriptをバンドルするためにwebpackを使用しています。 popsicle のようなモジュールに依存しています- any-promise を使用します。

私のコードは次のとおりです。

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

これは、Promiseが使用可能なブラウザーで正常に機能しますが、 IE 11はPromiseを提供しません です。そこで、ポリフィルとして es6-promise を使用します。

webpack.config.jsに明示的なProvidePluginを追加しようとしました：

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に添付したいだけです。

webpackを使用してwindow.Promiseが常に定義されていることを確認するにはどうすればよいですか？

ここで完全なレポデモ 。

javascriptwebpackinternet-explorer-11polyfills
38
Wilfred Hughes

Webpackと組み合わせてbabelを使用している場合： babel-polyfill を使用できます

npm install --save "babel-polyfill"を実行し、webpack.config.jsのエントリポイントとして追加します。

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

または、babel-polyfill全体を使用する代わりに、core-jsをインストールし、必要なモジュールのみを参照できます。

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

私のために働いたオプション。 es6-promise-promise は、webpackビルドに直接含まれるように設計されています。そう：

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

最近追加されたes6-promise-promiseを参照する必要のない、 ProvidePlugin のproperty機能を使用した@asiniyの回答の更新された簡潔なバージョン：

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

これが機能するためには、Promiseにポリフィルするプロジェクトの依存関係としてes6-promiseを追加することを忘れないでください。

9
staafl

Bluebirdのより良い使用

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

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

babel polyfillは通常は機能しますが、今回はvuejs（webpack1）プロジェクトの場合、どういうわけか機能しません。

幸いなことに、core-jsは魅力として機能します。

npm install core-js --save

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

Webpack 2では、これがどのように機能するかを示しています。

最初にnpm install babel-polyfillでインストールします。 NPM 5以降では、--saveは省略できます。

次に、次を使用してwebpack構成を変更します。

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

もちろん、./src/main.jsはアプリごとに異なります。

1
Pier

ほぼ手に入れました-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

1
Gabriel Florit

CRA（create-react-app）を使用している場合、それらが提供するポリフィルを使用できます。

react-app-polyfill

  • npm install react-app-polyfillまたはyarn add react-app-polyfill
  • index.jsファイル：import 'react-app-polyfill/ie11';
0
Mario Pérez