es2015で書いたjsのmoduleをclient-sideで動的にrequireするベストプラクティス

Question

タイトル通りなのですが、es2015で実装されたexportを利用してモジュールを作成したのですが、そのモジュールをbabelでトランスパイルした後、クライアントサイドで動的にrequireしたいと思っています。

色々検索したのですが、browserifyを利用することでソースコードを書き換え、ブラウザ実行時にはすでにrequire済みとなるような手法はたくさん出てきました。

しかし私は、ブラウザがモジュールをajaxで動的に読み込んでモジュールを手に入れるようなrequireを実現したいのです。

色々探していたのですが、意外にもjquery.getScript()が理想に近かったです。しかし、このメソッドは実行するとスクリプトが自動的に実行されてしまうので、ダメでした。

そこで以下のようなjQueryプラグインを自作しました。

  // 外部スクリプトを読み込むjQuery.requireを作成します。
  $.require = function(url){
    return new Promise((res, rej)=>{
      $.ajax({url, dataType: 'text'}).fail(rej).done((data)=>{
        res(eval(`(function(){${data} return exports.default||exports})()`))
      })
    })
  }

  // jQuery.requireを利用して
  // トランスパイル済みのmodule.jsを読み込む
  let module = $.require('http://example.com/module.js')

うまく動作しているような気がするのですが、こういったライブラリはすでに存在するのではないか？もし存在するなら多くの人が利用しているそちらのライブラリを使用したいなと思いました。

もし、何かそういったライブラリや、そのほかの手法（ベストプラクティスでなくてもよいので）をご存知の方がいらっしゃいましたらアドバイスいただけないでしょうか？

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

Answer 1

webpackで出来ます。
詳しくはasynchronous requireの説明を見てください。

Answer 2

「クライアントサイドで動的にrequireしたい」というのであれば、ちょうどそういったライブラリであるRequireJSというのがあります。

ただ、Node.jsにしてもES6のimportにしても、ライブラリの取り込みは同期的に行われるのが主流となっているので、Require.jsなど非同期に行うことそのものが、ベストプラクティスから外れてしまっている感もあります。

Answer 3

http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/