2013/10/01更新

[JS] requireJSで分割管理しているファイルを1つ結合する

こんにちは、です。
JSファイルの依存管理を行ってくれるrequire.js。これを用いて開発するとMVCモデルなどの機能をファイル毎に分割して開発することが容易になります。

ただ、ファイルをたくさん分割するとそれだけロードする為のHTTPリクエストも増えてしまい、初期表示のパフォーマンスを大きく低下させてしまいます。

今日のブログでは、require.jsで分割管理しているファイルを１つにする方法をブログに書きたいと思います。

今回結合するrequire.jsで管理したJSファイルたち

今回は、以下のようなディレクトリ構成のファイルを結合して、1つのファイルにしたいと思います。

+javascript

main.js
+views

top.js
search.js
mypage.js

+models

music.js
artist.js
my_pocket.js

依存関係は、以下の通りとします。

// main.js
require([
    'views/top',
    'views/search',
    'views/mypage',
], function (
    AppView,
    Search,
    Mypage
) {
    // main,jsの処理
});

// top.js
define(['models/music'], function (MusicModel) {
    // top.jsの処理
});

// search.js
define(['models/artist'], function (ArtistModel) {
    // search.jsの処理
});

// mypage.js
define(['models/my_pocket'], function (MyPocketModel) {
    // mypage.jsの処理
});

main.jsが各Viewクラスに依存していて、各Viewクラスは必要なModelクラスに依存している関係です。

上記の構造ではJSファイルが7つ存在しますが、ファイル結合することで1つのファイル（main-min.js）にしたいと思います。

require.jsの最適化を行うGruntタスク

require.jsの最適化を行う為に、今回はGruntタスクを使いたいと思います。
r.jsというコマンドラインツールをそのまま使っても良いのですが、フロントエンドのビルド先（開発向けとか、順本番とか、本番とか）でビルド内容を分けたいので、 Grunt.jsというフロントエンドビルドツールを使います。

require.jsのファイル結合行う為のnpmモジュールをインストールします。

$ npm install grunt-contrib-requirejs --save-dev

そして、ビルドファイルのGruntfile.jsを作成します。

/**
 * Gruntfile.js
 */
var fs = require('fs');
module.exports = function(grunt) {

    // load tasks.
    grunt.loadNpmTasks('grunt-contrib-requirejs');

    grunt.initConfig({

        requirejs: {
            dev: {
                options: {
                    name: 'main',
                    baseUrl: '../javascripts',
                    out: '../javascripts/main-min.js',
                    optimize: 'none',
                }
            },
            production: {
                options: {
                    name: 'main',
                    baseUrl: '../javascripts',
                    out: '../javascripts/main-min.js',
                }
            }
        },
    });

    grunt.registerTask('dev', ['requirejs:dev']);
    grunt.registerTask('production', ['requirejs:production']);
};

上記例では、開発環境向けのビルドと、本番環境向けでタスクを分けています。
開発環境向けでは、ファイルのConcatは行いますがデバッグ用にミニファイは行いません。
本番環境向けでは、ファイルのConcatとミニファイを行います。
ビルド処理向けにシェルを書いて、r.jsのオプションを切り替えることも出来ますが、 Grunt.jsがJSでビルドファイルを記載できるのはありがたい。フロントエンドのantとかmaven的な存在です。

grunt-contrib-requirejsの詳しい使い方は、以下をご参照ください。
Github：grunt-contrib-requirejs

また指定可能なオプションは、r.jsのビルドサンプルに記載されておりますので、そちらをご参照ください。
https://github.com/jrburke/r.js/blob/master/build/example.build.js

最後に

JSの依存管理を行えるrequire.jsはとっても便利ですね。今後も色々と使ってノウハウをブログに書いて行きたいと思います。

最後までご覧頂きましてありがとうございました。