requirejsでのモジュール読み込み

投稿日：2019年5月25日

JavaScriptのモジュール化では2019年5月現在ではwebpackなどを使うことが一般的かと思いますが、以前はrequire.jsなどというライブラリがあったようです。

例えば下記のようなファイル構成だったとします。

├── libs
│   ├── dateutil.js
│   └── strutil.js
├── main.js
├── require.js
├── sample.html

├── libs

│ ├── dateutil.js

│ └── strutil.js

├── main.js

├── require.js

├── sample.html

この場合、下記のようなファイルで読み込めます。

require.jsは下記よりDLしましょう。(CDNでもOK)

https://requirejs.org/docs/download.html

sample.html

<!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>

<!DOCTYPE html>

<html>

<head>

</head><body>

jsコンパイルなのでconsoleをみてみよう

</body>

</html>

libs/dateutil.js

*strutil.jsも同一の構成です。

define(function() {
    return {
        sampleEcho:function() {
            console.log('dateutils')
        }
    }
})

define(function() {

return {

sampleEcho:function() {

console.log('dateutils')

}

})

main.js

require(['./libs/dateutil','./libs/strutil'], function(dateutil, strutil){

    dateutil.sampleEcho()
    strutil.sampleEcho()
})

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

RequireJS使い方メモ

【RequireJS】使い方メモ