[JS] RequireJSのオプションで良く利用するBaseUrl, Paths, Shimを学ぶ

こんにちは、@yoheiMuneです。
今日は、モジュール開発をする上で便利なRequireJSで、良く利用するオプション（Config）をブログに書きたいと思います。

RequireJSとは

require.jsとは、JavaScriptでモジュール分割した開発を簡単に行うことをサポートしてくれるフレームワークです。 MVCなどの機能分割したファイルを、各ページ必要に応じて読み込むような実装を簡単に行うことができます。

require.jsに関する記事もありますので、ご参考になれば幸いです。
- JavaScriptをモジュール分割して開発できるRequireJSに入門

RequireJSをより便利に利用するオプション

requireJSはそれ自体でも大変便利な代物ですが、オプションを指定することでより便利に使うことができます。
例えば以下のように、オプションを設定できます。

<script src="scripts/require.js"></script>
<script>
  // requireメソッドを呼ぶ前に、require.configメソッドでオプションを指定する。
  require.config({
    baseUrl: "/another/path",
    paths: {
        "some": "some/v1.0"
    },
    waitSeconds: 15
  });

  // requireメソッドで文kつされたモジュールを読み込みます。
  require( ["some/module", "my/module", "a.js", "b.js"],
    function(someModule,    myModule) {
        //This function will be called when all the dependencies
        //listed above are loaded. Note that this function could
        //be called before the page is loaded.
        //This callback is optional.
    }
  );
</script>

requireメソッドを呼ぶ前に、require.config関数を使ってオプションをオブジェクト形式で指定できます。
オプションは様々ありますが、今回はその中で良く利用する、「baseUrl」と「shim」と「paths」をブログに書きたいと思います。

今回する紹介する内容の出元は、以下の記事です。 より詳細な情報は、以下リンクをご参照ください。
- RequireJS API #Config

BaseUrlオプション

BaseUrlを指定することで、requireメソッドやdefineメソッドでJSモジュールを読み込む際の、ベースパスを指定することが可能です。
RequireJS API #Configでは、以下のように説明されています。

the root path to use for all module lookups. So in the above example, "my/module"'s script tag will have a src="/another/path/my/module.js". baseUrl is not used when loading plain .js files, those strings are used as-is, so a.js and b.js will be loaded from the same directory as the HTML page that contains the above snippet.
If no baseUrl is explicitly set in the configuration, the default value will be the location of the HTML page that loads require.js. If a data-main attribute is used, that path will become the baseUrl.

勝手に意訳すると以下のようになりますでしょうか。

• BaseUrlは、すべてのモジュールを探すためのベースのパスとなります。例えば上記例の"my/module"を探す場合、"/another/path/my/module.js"を探します。
  
  
• BaseUrlは、プレーンな.jsファイルをロードする際には適用されません。上記例のa.jsとb.jsは、HTMLページと同じディレクトリから探されます。
  
  
• BaseUrlが指定されていない場合は、HTMLページのロケーションがBaseUrlとして使われます。ただし、data-main属性が付与されている場合は、data-main属性に指定されたパスがBaseUrlに利用されます。
  
  

Webアプリケーションの多くの設計ではJavaScriptファイルはscriptsなどの特定のディレクトリ配下にまとまっているはずなので、 JSを配置しているディレクトリをbaseUrlとして指定すると便利そうです。

Pathsオプション

続いて、pathsオプションです。これはモジュール指定のパスの解釈を保管する機能です。
以下の例でも出ていますが、あるモジュールのバージョンを切り替えたい場合に、モジュールロードの部分を全部直す代わりに、pathsを修正することで対応することができるようになり、 保守性があがりそうなオプションです。

RequireJS API #Configでは、以下のように説明されています。

path mappings for module names not found directly under baseUrl. The path settings are assumed to be relative to baseUrl, unless the paths setting starts with a "/" or has a URL protocol in it ("like http:"). In those cases, the path is determined relative to baseUrl. Using the above sample config, "some/module"'s script tag will be src="/another/path/some/v1.0/module.js". The path that is used for a module name should not include the .js extension, since the path mapping could be for a directory. The path mapping code will automatically add the .js extension when mapping the module name to a path.

またまた勝手に意訳すると、以下の感じでしょうか。

• パスマッピングは、baseUrl以下で直接見つけられないモジュールの名前解決を行います。
  
  
• pathsは、"/"やプロトコル(http://など)から始まらないパスの場合、baseUrlからの相対パスとして解釈されます。
  
  
• 上記例では、"some/module"を読み込む際に、"/another/path/some/v1.0/module.js"として読み込みます。
  
  
• pathに指定するパスには、拡張子(.js)を付与するべきではありません。拡張子は、名前解決の際に自動的に付与されます。
  

これは初期リリースとかでは使わないかも知れませんが、半年とか何年とか保守している際に、機能のバージョンアップとかの管理で使うと便利そうだなぁと思いました。
ここの設定を変えればプロジェクト全体で使うJSファイルを切り替えられるのは魅力的。

Shimオプション

最後にShimオプションです。これはよく使う機能で、requireJSと関係ないモジュールの依存関係を定義することができます。 例えば、backbone.jsを使いたい場合にjQueryとunderscore.jsを先に読み込む場合、backbone.jsとjQueryとunderscore.jsの依存関係をShimオプションで定義します。
なお、shimオプションを利用するにはRequireJS 2.1.0以上のバージョンが必要です。

RequireJS API #Configでは、以下のように説明されています。

Configure the dependencies and exports for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.

具体的な使い方は、以下の感じです。

requirejs.config({
    shim: {
        'backbone': {
            //These script dependencies should be loaded before loading
            //backbone.js
            deps: ['underscore', 'jquery'],
            //Once loaded, use the global 'Backbone' as the
            //module value.
            exports: 'Backbone'
        }
    }
});

//Then, later in a separate file, call it 'MyModel.js', a module is
//defined, specifying 'backbone' as a dependency. RequireJS will use
//the shim config to properly load 'backbone' and give a local
//reference to this module. The global Backbone will still exist on
//the page too.
define(['backbone'], function (Backbone) {
  return Backbone.Model.extend({});
});

backboneをdefineメソッドやrequireメソッドでモジュール読み込みする際に、shimオプションを指定しておくと、 undersocore,jquery -> backboneの順に読み込んでくれて、JSエラーが発生しないようになります。


またもう少し簡単に、以下のように指定することもできるようです。

requirejs.config({
    shim: {
        'jquery.colorize': ['jquery'],
        'jquery.scroll': ['jquery'],
        'backbone.layoutmanager': ['backbone']
    }
});

上記の実装は、jquery.colorizeモジュールは、jqueryモジュールに依存することを指定しています。


既に存在する便利なライブラリ（jquery, backboneやそれから派生するライブラリ）を使いたい場合には、使うと便利なオプションです。
requireJSで本格的に開発するなら、おおよそ使うオプションかもしれません。

その他のオプション

上記以外にも以下のオプションがRequireJSに存在します。
map, packages, waitSeconds, context, urlArgsなど

urlArgsは、開発初期でサーバーのキャッシュ設定がない場合に、キャッシュバスターとしてタイムスタンプを付与するなどの使い方が便利です。
詳細は、RequireJS API #Configからご確認ください。

最後に

requireJSは自分の周りでもよく使われている便利なライブラリ。 今後もお世話になることが多いかなぁと思います。今後ともより便利に利用できるように画策して、ブログにも記事を書いていきたいと思います。
最後までご覧頂きましてありがとうございました。