ES6で書いたコードを「HTMLのScript要素」と「ES6のimport」の両方で読み込めるようにする方法があれば教えてください

ES6でJavaScriptのプラグインを作っています。

そこで今悩んでいる部分になりますが、ES6で書いたコードを「Script要素」でも「ES6のimport」でも、どちらの方法でも読み込めるようにする何か良い方法があれば教えていただきたいです（いわゆるUMDみたいな書き方があれば）。できれば様々な開発環境で使える汎用的なプラグインにしたいと思っているところです。

以下のような現状です。
例えば以下のようなコードをES6の構文で書いたとします。

javascript
1// foo.js
2class Foo {
3  say() {
4    alert('hello');
5  }
6}

Babelでfoo2.jsというファイル名でコンパイル後、以下のようにscript要素で読み込むと通常通りFooオブジェクトが使えるようになります。

html
1<script src="foo2.js"></script>
2<script>
3var foo = new Foo;
4foo.say(); // => 'hello'がアラートされる
5</script>

さらに、importして使えるようにもしたいので、Fooをexportするように以下のように書いて、Babelでfoo2.jsとしてコンパイルすると、

javascript
1// foo.js
2
3class Foo {
4  say() {
5    alert('hello');
6  }
7}
8
9export default Foo;

Script要素で読み込めなくなってしまいます。

html
1<script src="foo2.js"></script>
2<script>
3var foo = new Foo;
4foo.say(); // => ReferenceError: exports is not defined
5</script>

原因は、コンパイルされて吐き出されるコードに以下が含まれているからです。「exports」が定義されていないよと怒られてしまいます。

javascript
1Object.defineProperty(exports, "__esModule", {
2  value: true
3});

いろいろ調べてみたんですが、結局script要素用とimport用の2つのjsファイルを用意して、それぞれbabelでコンパイルする方法くらいしか思いつきません。何かうまい書き方や方法をご存知の方がいれば教えていただけると幸いです。

よろしくお願いいたします。

関連した質問