概要
メモなので流し書き。
RequireJSを使うことで任意のライブラリ達をそのページごとに動的に読み込めるように書くことができるが、これをそのまんま使い、小分けにモジュール単位でJSを組んだ場合、読み込むJSのリクエスト数が膨れ上がっていく。
webpackでは1枚のファイルに使用するJS達を結合することで解決する。
RequireJSならr.jsやらgrunt-contrib-requirejsでも同様のことが可能である。
が、運用フェーズではWebpackやGrunt等のタスクランナーが使用できない状況下で
RequireJSを用いて動的に読み込みつつ共通部分に関してはリクエスト数を減らすため、結合したライブラリを用いたい。
単純にgrunt-contrib-concat等を使ってconcat、結合すればよいかといえば現状そのままではうまくいかなくてハマったのでその解決策をメモする。
例
例えば、標準でjqueryとunderscoreとbackboneをどのコンテンツでも使用すると仮定した場合、この3つのファイルを結合したJSファイルを作り、これを単純にconcatしたファイルをrequireで読み込んだ場合、backboneの読み込みがコケる。
grunt-contrib-requirejsやらを用いるとうまく読むので、どうも普通にはくっつけていない模様、何が違うのかと。
原因
AMD対応で入れたdefine部分の書き方に少し問題がある。
grunt-contrib-requirejsやらの使用ではちゃんと解決した状態でconcatしている。
jQuery
define("jquery",[],function(){return m})…
→define部分が「名前」「依存関係」「定義」になっている。
この名前が定義されているライブラリ群はconcatされていても「jquery」指定で正しく読める。
問題のbackbone
define(["underscore","jquery","exports"],function(i,r,s){t.Backbone=e(t,s,i,r)})…
→define部分に名前が定義されていない
これが原因で読み込みがコケる。
define("backbone",["underscore","jquery","exports"],function(i,r,s){t.Backbone=e(t,s,i,r)})…
で、こう直すと「backbone」で読めてうまくいく。
締めに
define('vendor',['jquery', 'underscore', 'backbone'], function(){});
concatしたファイルに最下部にこの1行を入れておくと「vendor」指定でこの3つのライブラリが読める。
ほかに
velocityも同様に名前定義が無いのでconcatでくっつける場合は名前指定を入れておく。
自分でモジュールを作る場合もdefine指定は名前を定義しておく癖を付けておく。