Dojo Build System、独自のビルドエクスペリエンス

Dojoは、そのすべての力と肯定的な性質にもかかわらず、最も人気のあるJavaScriptフレームワークではありません。 今日私が読者に伝えたい情報は、この技術を使用して構築されたすべてのプロジェクトに絶対に必要です。

そして、ビルドシステムについて説明します。

それは何であり、なぜ必要なのか

コミュニティは、サーバーでホストされ、Webアプリケーションで使用されるように設計された既製の最適化されたリリースを提供します。 dojo.require（）を介して必要なモジュールを接続することにより、同期HTTP GET要求を開始して必要なリソースを取得します。 ブラウザは各呼び出しの完了を予期しているため、ページの読み込み時間が大幅に増加します。 いわゆる「レイヤー」（以下、単にレイヤーと呼びます）は、リソースの接続を最適化するのに役立ちます。

dojoビルドシステムを使用して独自のアセンブリを作成するタスク：

• 使用済みモジュールのレイヤーを作成します。 必要なモジュールはすべて1つのファイルに収集されます。これにより、ページを開く速度が大幅に向上します。
• dojoモジュールのコードの変更が必要な場合は、常にソースコード（dojoのsrcバージョン）のみを使用します
• そのような変更が存在する場合、それらを次の更新に統合するアクションは最小限に抑えられます

アセンブリを作成するために必要なもの

• ダウンロードページにある、dojoのsrcバージョン
• JRE 1.5以降
• 必要に応じて、アセンブリに含める独自のリソース（js、cssなど）。
• プロファイル-新しいアセンブリの作成を記述するjsファイル。
• Mozilla FoundationのRhinoエンジン。 Dojoはビルドユーティリティにそれを入れませんでしたが、積極的に言及しています。 Mozilla Webサイトで入手できます。

レイヤーを作成する

アセンブリを準備する段階のレイヤーは、必要な接続を含む構成ファイルです。 たとえば、Webプロジェクトのすべてのページに接続されるメインレイヤーを作成し、commonlayer.jsと呼びます。

dojo.provide("ourcompany.commonlayer"); //  dojo.require("dojo.parser"); dojo.require("dojo.NodeList-fx"); dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dojox.data.AndOrReadStore"); dojo.require("dojo.back"); dojo.require("dojox.fx._base"); dojo.require("dojo.cookie"); // dojo.require("ourcompany.shadow"); 

ourcompany.shadow-これが私たち自身のモジュールであり、使用したいdojo.fx.shadowシャドウのカスタマイズだとしましょう。

比較のために、dijit.Editorエディターで作業するための追加レイヤー：

 dojo.provide("ourcompany.editorlayer"); //     dojo.require("dijit.Editor"); dojo.require("dijit._editor.plugins.FontChoice"); dojo.require("dijit._editor.plugins.TextColor"); dojo.require("dijit._editor.plugins.EnterKeyHandling"); // dojo.require("ourcompany.dijit._editor.plugins.LinkDialog"); 

独自のニーズに合わせて、LinkDialogリンク挿入プラグインを変更しました。 シャドウの場合と同様に、標準アセンブリから取り出して独自の方法で呼び出します。 名前の変更は簡単です。プラグインのソースjsコードは、たとえば次のような新しい宣言を含む行を追加します。

 dojo.provide("ourcompany.dijit._editor.plugins.LinkDialog"); 

ここで、ourcompany.dijit ....は、ファイルシステム内のモジュールの物理的な配置、\ ourcompany \ dijit \ _editor \ plugins \ LinkDialog.jsについても説明しています。

プロファイル作成

layers.profile.jsプロファイルは、依存関係オブジェクトの必須レイヤーと命名領域を記述します。

  dependencies = { layers: [ //    { name: "../ourcompany/commonlayer.js", resourceName: "ourcompany.commonlayer", dependencies: [ "ourcompany.commonlayer" ] }, { name: "../ourcompany/editorlayer.js", resourceName: "ourcompany.editorlayer", dependencies: [ "ourcompany.editorlayer" ] } ], prefixes: [ // ,    /dojo,      //ourcompany -       [ "dijit", "../dijit" ], [ "dojox", "../dojox" ], [ "ourcompany", "../ourcompany" ] ] } 

そのようなファイルは最適化された2つのレイヤーのみを作成し、残りのファイルは変更せずにアセンブリ中に単純にコピーされます。 ただし、公式リリースから取得することはできます。 おそらく、プロファイルを補完して完全な道場アセンブリを作成したいという希望があるかもしれませんが、私はしませんでした。

集める

dojoのsrcバージョンには、ビルドスクリプトと、コードを難読化（最適化）するためのshrinksafeユーティリティを見つけることができる特別なutil dadがあります。 しかし、「箱から出してすぐに」これは機能しません。 掘り下げて勝たなければなりませんでした。 Dojoには、build.batを介したWindows用とbuild.shを介したLinux用の2つのビルドオプションがあります。 私は自分のコンピューターのWindowsでアセンブリを実行しました。

ビルドプロセス自体が\ util \ buildscripts \ build.batファイルを起動します。 正しい-classpathを使用して編集します。

java -classpath "../rhino/js.jar;../shrinksafe/js.jar;../shrinksafe/shrinksafe.jar" org.mozilla.javascript.tools.shell.Main build.js %*
pause

ここで、rhinoは上記のJavaエンジンです。

makeRelease.batファイルを使用してパラメーターを指定することにより、アセンブリを実行すると便利です。 私はこの方法でやりましたが、バッチファイルの作成の専門家ではありません。よりエレガントになると思います。

@echo off

E:
cd \js\dojoroot

set FLDR=E:\js\dojoroot
echo buid root directory: %FLDR%

cd %FLDR%\dojo-release-1.6.0-src\util\buildscripts
build.bat action=clean,release profileFile=%FLDR%\layers.profile.js version=ourcompany-1.6.0/2 releaseName=

ファイルシステムでは、次のようになります。


ご覧のとおり、ソース（「dojo-release-1.6.0-src」ディレクトリ）からアセンブリを作成し、そこに変更したモジュールとリソースを含む「ourcompany」フォルダーを配置しました。 build.batを実行するには、次の引数を使用します。

• アクション-必要なアクション、クリーン-古いアセンブリディレクトリのクリア、リリース-アセンブリの作成
• profileFile-プロファイルへのパス
• version-アセンブリのバージョン。dojo.versionを介して戻ることができます
• releaseName-設定されている場合は空になります。あなたの名前のサブディレクトリがリリースフォルダーに表示されます

引数の完全なリストはドキュメントにあります 。

アセンブリが完了すると、ディレクトリは次の形式になります。


このリリースには、実際に新年の贈り物である最初のカスタム道場アセンブリが含まれています。 \ release \ ourcompany \には2つのレイヤーがあり、それぞれが接続する必要があるモジュールの最適化された強力な束です。

レイヤーをプロジェクトページに接続します。

 <!--       dojo:--> <script type="text/javascript" src="dojo/dojo.js"></script> <!--       : --> <script type="text/javascript" src="ourcompany/commonlayer.js"></script> <!--  ,   , : --> <script type="text/javascript" src="ourcompany/editorlayer.js"></script> 

レイヤーの操作は、dojo.require（）を介したモジュールの標準的な操作を除外しません。 dojo.require（）を接続する前に、そのようなモジュールがすでに接続されているかどうかをチェックし、再接続を防止することに注意してください。

結果

この記事は、詳細な結論と創造的な検索の成果物であるだけでなく、実際の経験が実際のWebプロジェクトに適用されたものです。 独自のアセンブリを作成して使用した後に得たもの：

• すべてのページの読み込み速度が大幅に向上しました。 Firebugの個人的な観察とwebpagetest.orgベンチマークのダウンロード時間を約1秒短縮
• エディターが使用されていないプロジェクトのメインページでは、129の連続したHTTP GETリクエストが1つになりました（原文）！
• プロジェクトは、dojo 1.4からバージョン1.6へのアップグレードを生き延びましたが、新しいバージョンに簡単にアップグレードできるようになりました。

PS dojoモジュールを変更すると、多くの場合、依存関係の問題が発生します。 たとえば、アセンブリに含まれるdijit.EditorのLinkDialog.jsプラグインを変更する場合、標準ファイルourcompany \ dijit \ nls \ ru \ common.js（loading.js）をourcompanyフォルダーのsrcバージョンに追加する必要がありました。 この操作がないと、editorlayer.jsレイヤーは失敗します。

アセンブリ作成メカニズムを勉強するとき、私は公式のdojoツールキットのWebサイトにあるドキュメントを使用しました。
http://dojotoolkit.org/reference-guide/build/
http://dojotoolkit.org/reference-guide/build/simpleExample.html
http://dojotoolkit.org/reference-guide/build/buildScript.html