【requireJS】階層ネームスペースを UMD型式で【commonJS】

More than 1 year has passed since last update.

About

requireJSを今更導入しました
requireJSどころかJavaScript初心者なので
指摘あればお願いします

階層ネームスペース 例えば hoge.moge.test()
を作りたいが

require(['hoge.moge' ], function( hoge.moge ) {

と記述すると、 関数の引数に ドットは当然使えず、文法エラーを吐きます
ので、その対策に 少し時間がかかったのでメモ

とても単純なので手短に 答えだけを

hoge.moge.fuga.test()

index.html
<html>
<head>
    <title>require test</title>
    <script src="config/require_config.js"></script>
    <script data-main="js/start.js" src="js/require.js">
</head>
<body>
working!
</body>
</html>
config/require_config.js
var require = {
    paths: {
          'hoge': '../js/hoge'
          , 'hoge.moge': '../js/hoge_moge'
          , 'hoge.moge.fuga': '../js/hoge_moge_fuga'
    }
};
js/start.js

// functionの引数に hoge.moge 等のドット付きの変数名は使えないので、親の hogeを使いアクセスする!
// 実際には hoge.moge.fugaのみの依存関係だが、 hogeを使ってアクセスするため hogeも依存関係に入れる
require(['hoge', 'hoge.moge.fuga'], function( hoge ) {
  hoge.test();
  hoge.moge.test();
  hoge.moge.fuga.test();
});
js/hoge.js

(function(factory){
    // CommonJS
    if (typeof exports === "object") {
        module.exports = factory();

    // RequireJS
    } else if (typeof define === "function" && define.amd) {
        define(factory);

    // <script>
    } else {
        hoge = factory();
    }

}(function(){

// 名前空間のみでも return {} で空を返そう!
return {
    test: ( function (){ console.log("hoge");}) 
  }

}));
js/hoge_moge.js

(function(factory){

    // CommonJS
    if (typeof exports === "object") {
        // commonJSはテストしていないので 参考までに・・ 
        module.exports = factory(require('hoge'));

    // RequireJS
    } else if (typeof define === "function" && define.amd) {
        // hogeに依存する
        define( ['hoge'], factory);
    // <script>
    } else {
      // hoge.moge = ... と名前空間を上書きしない
      factory(hoge);
    }

}(function(hoge){
// hogeを使ってアクセスする。 もちろん hoge["moge"]でも良い
hoge.moge = function () {
  return{
    test: (function(){ console.log("moge");})
  }
}()} )) ;
hoge_moge_fuga.js
(function(factory){

    // CommonJS
    if (typeof exports === "object") {
        // CommonJSはテストしてないので参考まで・・
        module.exports = factory(require('hoge'), require('hoge.moge'));

    // RequireJS
    } else if (typeof define === "function" && define.amd) {
        define( ['hoge', 'hoge.moge'], factory );

    // <script>
    } else {
      factory(hoge );
    }

}(function(hoge){
// hogeからアクセスする。 hoge.moge からアクセスする方法わからなかった。。
hoge.moge.fuga = function () {

  return{
    test: (function(){ console.log("fuga");})
  }

}()} )) ;

まとめ

function引数に ドット付きの変数名は不可能なので
一番親の名前空間を利用してアクセスする必要がある
名前空間は最低でも空のブランケットをリターンする