バンドル・モジュールのカスタマイズ

requirejsモジュール・バンドルのコンテンツを定義して、「ステージング」がビジュアル・アプリケーションの場合に複数のバンドルを作成できます。

最初にロードするページはメイン・バンドルにパッケージ化でき、最初は必要でないその他のフローにあるその他のページおよびページは、必要なときにロードできる別のバンドルにパッケージ化できます。モジュール・バンドルをカスタマイズすると、アプリケーションのロードおよび実行に必要な時間の最適化に役立ちます。

たとえば、この構成例では、webアプリケーション1という名前のWebアプリケーションに対して次のrequireモジュール・バンドルを作成するようにvb-require-bundleタスクを構成する方法を示しています。

アプリケーション・フローdashboardに属するすべてのリソースのバンドル。このバンドルには、フロー/ダッシュボード・パターンに一致するすべてのファイルが含まれます。これには、flows/dashboardディレクトリに格納されているすべてのページ、モデル、リソースおよびネスト・フローが含まれます。このバンドルには、含まれるいずれかのページ・モデルで参照される、helpersというモジュールは含まれていません。
アプリケーション・フローcustomersに属するリソースのバンドル。この場合、ネストされたフローは(別個のバンドルに配置されるため)除外されます。このバンドルは、helpersモジュールも除外します。
顧客フローにネストされたフローのリソースのバンドル。
アプリケーション・リソース(シェル・ページおよびアプリケーション・リソース、ライブラリおよびスタイル)の基本バンドル。このバンドルはhelpersモジュールを明示的に追加します。

バンドル・モジュールをカスタマイズする手順は、次のとおりです:

Gruntfile.jsを開きます。

ファイルを編集してvb-require-bundleタスクを構成します。

{
  "vb-require-bundle": {
     "webapp1": {
         "options": {
             "transpile": true,
             "minify": true,
             "bundles": {
                 "dashboard": {
                     "modules": {
                         "find": ["flows/dashboard"]
                     },
                     "exclude": {
                       "ids": ["helpers"]
                     }
                   },
                   "customers": {
                       "modules": {
                          "find": ["flows/customers", "!flows/customers/flows"]
                        },
                       "exclude": {
                         "ids": ["helpers"]
                         }
                   },
                   "customers-nested": {
                       "modules": {
                          "find": ["flows/customers/flows"]
                        }
                   },
                   "base": {
                     "modules": {
                       "find": [
                         "app-flow.js",
                         "^pages/",
                         "resources/strings",
                         "resources/css"
                       ],
                       "ids": ["helpers"]
                       }
                   }
             }
         }
     }
  }
}