読者です 読者をやめる 読者になる 読者になる

dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

follow us in feedly

[dojo]dojoConfigの主なパラメータまとめ

JavaScript dojo

ほぼほぼ、このへんの内容をまとめたものです。

Dojo道場 ~ 第11回「Dojo 最新動向 - Asynchronous Module Definition」 (5/5):CodeZine
Configuring Dojo with dojoConfig - The Dojo Toolkit
dojo.config (dojo/_base/config) — The Dojo Toolkit - Reference Guide

dojoConfigの基本的な書き方

以下のように、dojo.jsのロードより前に記述すること。

<script type="text/javascript">
dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true,
    baseUrl: 'XXX',
    packages: [{
        name: "myapp",
        location: "/js/myapp"
    }],
    paths: {
        "dojo/main": "../mypackage/dojo-main"
    },
    aliases: [
        ["ready", "dojo/domReady"]
    ],
    ...(以下、同様にパラメータを並べる)
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.5/dojo/dojo.js"></script>
...

パラメータ

isDebug

公式ドキュメントによると、これをtrueにするとFirebugを介してDojo用の拡張デバッグツールをロードするらしい。
デバッグウィンドウ自体はどのブラウザでも使えるとのこと。

parseOnLoad

trueにすると、ページ読み込み時にdojo/parserがページをパースする。
デフォルトではfalseであり、公式ドキュメントでもfalseにして明示的にparser.parse()を呼び出すべきだと記述している。

baseUrl

パッケージ間共通のモジュールの位置の設定。
たとえば、以下のように
index.htmlで読み込むモジュールをmyディレクトリにまとめていたとする。

root
├── index.html
└── my/
    ├── discount.js
    ├── price.js
    └── pricelist.js

この場合、index.htmlでは

dojoConfig = {
    baseUrl: 'my',
    ...
};

とする。

paths

パスのエイリアスを設定。
例えば、

root
├── index.html
└── my/
    └──long/
        └──path/
            └──name/
                ├── discount.js
                ├── price.js
                └── pricelist.js

こうなっていて、baseUrlmyにした時、

dojoConfig = {
    baseUrl: 'my',
    paths: {
        demo: 'long/path/name'
    }
};

と書けば、demo/priceとかでモジュールを利用できる。

packages

カスタムパッケージの追加。
Dojo 1.7以前ではmodulePathsを使っていたらしいが現在はこちらを使った書き方らしい。
カスタムパッケージと言ってるけど、要するに自分で作ったモジュールファイル置き場を指定する。
オブジェクトの配列として記述し、name, locationプロパティに加えmainを指定できる。

dojoConfig = {
    packages: [
        {
            name: "demo",
            location: location.href + "demo",
            main: "myModule"
        }
    ]
};

mainに指定したモジュールは、ロードするデフォルトのモジュールとして認識され
モジュール名を省略した時にも自動的に呼び出されるようになる。

require(["demo"], function (myModule) {
    console.log(myModule.someProperty);
});

aliases

文字通り、エイリアスを定義する。
次の例では、dojo/domReady!のかわりにready!と書くことができる。

aliases: [
    ["ready", "dojo/domReady"]
]

pathspackagesはどう使い分けるの?

このへんの記事を読んだんだけど、イマイチよくわからん。
Dojo FAQ: What is the difference between a package, a path and an alias? | Blog | SitePen

引用すると、

In most scenarios, you should use packages. When creating a custom Dojo build to optimize your application, you will find additional options such as renaming packages on the fly and defining alternative destination locations for a package.

The paths and aliases properties do allow for some powerful changes on the fly, and can be used to create some interesting loader configuration, especially in testing and debugging. However, really, the better option in newer versions of Dojo is the map property, which we’ll cover in the next FAQ!

基本的にはpackagesを使えばよく、
pathsはテストとかデバッグ用に使用し、もっとパワフルな変更を提供するものとのことだけど
使い分けのシーンが思いつかない。