Webpackでpolyfillをちゃんと動かす
面倒だったので備忘録
Polyfillの設定
とりあえずwebpackはrequireしないと駄目。
でも既存のコードを一切変えずにpolyfillをインストールしたい。
webpack.ProvidePlugin
を使う。
new webpack.ProvidePlugin({ 'Promise': 'es6-promise', 'Symbol': 'es6-symbol', 'fetch': 'imports?this=>global!exports?global.fetch?window.fetch!whatwg-fetch', 'Response': 'imports-loader?this=>global!exports-loader?global.Response!whatwg-fetch' }),,
こんな感じで書いた。
次に
npm i imports-loader exports-loader -D
を実行。
Promise、Symbolはrequire('es6-promise')
、require('es6-symbol')
がそれぞれPromise
、Symbol
という変数名でモジュール毎に定義される。
fetchはとても読みづらいし考えたやつ頭おかしいが、
まず、whatwg-fetchの定義の下のthis
がglobal
を参照している箇所でmodule.exports = fetchg
を定義して、
fetchを参照しているモジュールに(function(fetch){ ... })(require('whatwg-fetch'))
のようなコードを追加する。
Responseも同じく。
まとめ
webpackの独自仕様を追加すぎるとESModuleへの移行がつらそうなので程々に。