abcdefGets

ゲッツ!

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')がそれぞれPromiseSymbolという変数名でモジュール毎に定義される。
fetchはとても読みづらいし考えたやつ頭おかしいが、
まず、whatwg-fetchの定義の下のthisglobalを参照している箇所でmodule.exports = fetchgを定義して、
fetchを参照しているモジュールに(function(fetch){ ... })(require('whatwg-fetch'))のようなコードを追加する。
Responseも同じく。

まとめ

webpackの独自仕様を追加すぎるとESModuleへの移行がつらそうなので程々に。