タイトル通りなのですが、es2015で実装されたexportを利用してモジュールを作成したのですが、そのモジュールをbabelでトランスパイルした後、クライアントサイドで動的にrequireしたいと思っています。
色々検索したのですが、browserifyを利用することでソースコードを書き換え、ブラウザ実行時にはすでにrequire済みとなるような手法はたくさん出てきました。
しかし私は、ブラウザがモジュールをajaxで動的に読み込んでモジュールを手に入れるようなrequireを実現したいのです。
色々探していたのですが、意外にもjquery.getScript()が理想に近かったです。しかし、このメソッドは実行するとスクリプトが自動的に実行されてしまうので、ダメでした。
そこで以下のようなjQueryプラグインを自作しました。
javascript
1 // 外部スクリプトを読み込むjQuery.requireを作成します。 2 $.require = function(url){ 3 return new Promise((res, rej)=>{ 4 $.ajax({url, dataType: 'text'}).fail(rej).done((data)=>{ 5 res(eval(`(function(){${data} return exports.default||exports})()`)) 6 }) 7 }) 8 } 9 10 // jQuery.requireを利用して 11 // トランスパイル済みのmodule.jsを読み込む 12 let module = $.require('http://example.com/module.js') 13
うまく動作しているような気がするのですが、こういったライブラリはすでに存在するのではないか?もし存在するなら多くの人が利用しているそちらのライブラリを使用したいなと思いました。
もし、何かそういったライブラリや、そのほかの手法(ベストプラクティスでなくてもよいので)をご存知の方がいらっしゃいましたらアドバイスいただけないでしょうか?
よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。