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
が常に定義されていることを確認するにはどうすればよいですか?
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']
};
私のために働いたオプション。 es6-promise-promise は、webpackビルドに直接含まれるように設計されています。そう:
plugins: [
new webpack.ProvidePlugin({
Promise: 'es6-promise-promise'
})
]
最近追加されたes6-promise-promise
を参照する必要のない、 ProvidePlugin のproperty
機能を使用した@asiniyの回答の更新された簡潔なバージョン:
new webpack.ProvidePlugin({
Promise: ['es6-promise', 'Promise']
})
これが機能するためには、Promise
にポリフィルするプロジェクトの依存関係としてes6-promise
を追加することを忘れないでください。
Bluebirdのより良い使用
plugins: [
new webpack.ProvidePlugin({
Promise: 'bluebird'
}),
new webpack.NormalModuleReplacementPlugin(/es6-promise$/, 'bluebird'),
]
babel polyfillは通常は機能しますが、今回はvuejs(webpack1)プロジェクトの場合、どういうわけか機能しません。
幸いなことに、core-jsは魅力として機能します。
npm install core-js --save
module.exports = {
entry: ['core-js/fn/promise', './app/js']
};
Webpack 2では、これがどのように機能するかを示しています。
最初にnpm install babel-polyfill
でインストールします。 NPM 5以降では、--save
は省略できます。
次に、次を使用してwebpack構成を変更します。
entry: {
app: ['babel-polyfill', './src/main.js']
}
もちろん、./src/main.js
はアプリごとに異なります。
ほぼ手に入れました-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
CRA(create-react-app)を使用している場合、それらが提供するポリフィルを使用できます。
npm install react-app-polyfill
またはyarn add react-app-polyfill
index.js
ファイル:import 'react-app-polyfill/ie11';