Posted at

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

More than 3 years have 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引数に ドット付きの変数名は不可能なので

一番親の名前空間を利用してアクセスする必要がある

名前空間は最低でも空のブランケットをリターンする