【RequireJS】configの設定方法の違い

前回記事からの続きです。
RequireJSでは定義したjsファイルを読み込む時に、相対パス指定を省略できるようにconfigを設定することができます。
htmlからrequireJSを読み込んだ際に、configの設定方法について違いが二つあります。

前提

前回と同じHelloWorld.jsのソースを用います。
今回はHelloWorld.jsとutil.jsに差分はありません。

HelloWorld.js

require(['util'], function(util) {
    var result = util.add(10, 21);
    console.log('10 + 21 = ' + result);
});

util.js

define(function() {
    return {
        add: function(a, b) {
            return a + b;
        }
    }
})

requireJSを読み込んだ後にconfigを設定する

多分こっちのほうが王道。
requireJSを読み込み、require.configで設定する。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
        <script src="./js/config/config.js"></script>
        <script src="./js/HelloWorld.js"></script>
        <h1>Hello World!</h1>
    </body>
</html>

config.js

require.config({
    baseUrl: "js",
    paths: {
        "util": "lib/util"
    }
});

requireJSを読み込むより前にconfigを設定する

たまに見かける。
先にrequireフィールドを定義することでconfig情報を設定しておき、後からrequireJSを読み込む方法

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="./js/config/config.js"></script>
        <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
        <script src="./js/HelloWorld.js"></script>
        <h1>Hello World!</h1>
    </body>
</html>

config.js

var require = {
    baseUrl: "js",
    paths: {
        "util": "lib/util"
    }
};

まとめ

ちなみにこの場合、index.htmlから見て
./js/lib/util配下にutil.jsがあることになります。
それをHelloWorld.jsではrequireにutilを宣言するだけでutil.jsを呼び出すことができます。

javaScriptカテゴリの最新記事