webpackとbabelを使って、URLインターフェースを動作させたい

前提・実現したいこと

webpack + babel + αを使って
IE11でURLインターフェースを動作させたいと考えています。

発生している問題・エラーメッセージ

Chrome、Edge等では正常に動作しますが
IE11では

このオブジェクトではサポートされていない操作です。

のようにエラーになります

該当のソースコード

webpack.config.js

javascript
1module.exports = {
2  mode: 'development',
3  entry: [
4    "babel-polyfill",
5//    "url-polyfill",
6    __dirname + "/src/test.js"
7  ],
8  output: {
9    path: __dirname +'/bundle',
10    filename: 'bundle.js'
11  },
12  module: {
13    rules: [
14      {
15        test: /.js$/,
16        use: [
17          {
18            loader: 'babel-loader',
19            options: {
20              presets: [
21                ['env', {'modules': false}],
22              ]
23            }
24          }
25        ]
26      }
27    ]
28  }
29};

javascript
1setTimeout(() => {
2  var url = new URL(window.location.href);
3  console.log(url.host);
4}, 1000);

試したこと

https://developer.mozilla.org/ja/docs/Web/API/URL
ここから、IE11ではインスタンス生成ができないからということはわかりました。

HTML
1<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

このようにpolyfillを読み込めば、IE11でも動くことは確認できていますが、
外部のAPI依存を避けたいこと、
webpackをしていることから、bundle.jsにまとめたいと考えています。

補足情報（FW/ツールのバージョンなど）

webpack : 4.12.1
babel-core : 6.26.3
babel-polyfill : 6.26.0

euledge

2018/06/30 12:30

window.location.hrefから hostを取得するのが目的であれば正規表現で対応するというのはどうでしょうか？

iride

2018/06/30 16:22

質問ありがとうございます。 window.location.hrefは例で出しているだけで、hostを取得したいのが目的ではありません。おっしゃる通り、hostを取得する目的でしたら、正規表現でも取得することができますし、 window.location.hostでも取得できることは承知しています。 URL自体がMDN Web docsにあるように実験段階の機能であり、 ECMAScriptでも標準化がなされていないので、できないということでしたら、それで納得するつもりではあります。開発段階で発見することでできましたが、今後も同様なことがないとは言いきれないため、 webpackのmoduleやbabelのpresets等で対応できる手段がないのかと思い質問した次第です。