JavaScriptのモジュール化では2019年5月現在ではwebpackなどを使うことが一般的かと思いますが、以前はrequire.jsなどというライブラリがあったようです。
例えば下記のようなファイル構成だったとします。
1 2 3 4 5 6 |
├── libs │ ├── dateutil.js │ └── strutil.js ├── main.js ├── require.js ├── sample.html |
この場合、下記のようなファイルで読み込めます。
require.jsは下記よりDLしましょう。(CDNでもOK)
https://requirejs.org/docs/download.html
sample.html
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" data-main="./main.js" src="require.js"></script> </head><body> jsコンパイルなのでconsoleをみてみよう </body> </html> |
libs/dateutil.js
*strutil.jsも同一の構成です。
1 2 3 4 5 6 7 |
define(function() { return { sampleEcho:function() { console.log('dateutils') } } }) |
main.js
1 2 3 4 5 |
require(['./libs/dateutil','./libs/strutil'], function(dateutil, strutil){ dateutil.sampleEcho() strutil.sampleEcho() }) |
こんな感じで、複数のJSファイルを読み込めます。
昔、Angularをやった時にこんな構成がありましたね・・
他にも、設定ファイルを使う方法やビルドして一気にmain.jsにファイルを集める方法などあります。
ソースURL
https://github.com/umanari145/library/tree/master/requirejssamp
参考URL