¿Cómo se ve una configuración mínima de compilación para dojo?

dojo-build

Question

Estudié el tutorial de compilación , encontré la compilación web (solo 1.7.2) y probé varios ejemplos; sin embargo, no pude encontrar una explicación fácil del sistema de compilación.

Digamos que mi aplicación es una sola página web:

<script src="./js/App/other_non_amd_stuff_working_independently.js">
<script src="./js/lib/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="./js/App/Main.js">

El Dojo SDK está en ./lib/, Main.js contiene el inicio de la configuración + aplicación de Dojo:

require({
    packages:[{
        name:"App",
        location:"../../App"
    }]
},  
[ "dojo/query",
  "dijit/layout/BorderContainer", 
  "App/Foo",
  "dojo/domReady!"], function(query, BorderContainer, Foo) { ... });

Mi pregunta ahora es tan simple como esto: ¿cómo puedo crear un único archivo de script de todas mis cosas Dojo / AMD? Solo quiero reemplazar

<script src="./js/lib/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="./js/App/Main.js">

con un solo

<script src="./js/Main.minified.js">

Hacer que el sistema de compilación funcione en esto parece algo no trivial. Intenta convertir todos los archivos en ./App/ a los módulos de AMD (eso no es lo que quiero ... todavía) o no encuentra la aplicación / principal. Intenté crear un perfil de compilación (app.profile.js), pero no entiendo el punto de esto, excepto que está agregando complejidad (IMO innecesaria). ¿Cómo puedo hacer que el sistema de compilación solo concatene mi aplicación / Main.js incl. dependencias?

También se agradece cualquier sugerencia para mejores tutoriales sobre la comprensión del sistema de compilación.

Answer 1

Vea este QnA para construir su capa en el archivo dojo.js. También podría compartir mis experiencias, ya que me ha llevado algunas pruebas y errores para que mis bootstraps funcionen correctamente. En realidad, la respuesta se encuentra fácilmente en el archivo ''dojosdk / util / buildscripts / profiles / baseplus.profile.js''.

Dojo Custom Build 1.6 en un solo archivo (la misma configuración que el nuevo buildsystem, aún puede sufrir algunos cambios para 2.0)

Cómo crear la capa de aplicación principal suturada junto con dojo.js

dependencies ={
  layers:  [
      {
      name: "dojo.js", // overwrites regular dojo.js and ++''s your layer
      dependencies: [
         "app.main"
      ]
  }
}

Recuerde prefijar las ubicaciones correctamente

Como tiene el módulo ''Aplicación'' colocado fuera de la raíz del SDK de dojo, debería aplicarse lo mismo cuando asigna packages en dojoConfig . Sin embargo, la clave de atributo es prefixes para un perfil de capa.

prefixes: [
    [ "dijit", "../dijit" ],
    [ "dojox", "../dojox" ],
    [ "App", "../../App" ]
]

Cómo crear una capa de submódulo

Es posible que desee construir un submódulo de su aplicación, de modo que si un diálogo emergente, por ejemplo, requiere un extra adicional, se puedan descargar en tiempo de ejecución en un paquete separado. Para asegurarse de que las dependencias, que ya están cargadas a través de su capa de módulo principal, no se incluyen en la capa de submódulo , la clave de atributo que está buscando es layerDependencies .

Se vería así para un resultado combinado:

dependencies ={
  layers:  [
      {
        name: "../dojo/dojo.js", // overwrites regular dojo.js and ++''s your layer
        dependencies: [
         "app.Main"
        ]
      }, {
        name: "../../App/JITModule.js",
        layerDependencies: [
         "../../App/Main"   // tells this layer that the dependencychain in Main is allready loaded (programmer must make sure this is true ofc)
        ]
        dependencies: [
         "App.JustInTimeDialog"
        ]
      }
  ]
  prefixes: [
    [ "dijit", "../dijit" ],
    [ "dojox", "../dojox" ],
    [ "App", "../../App" ]
  ]
}

Esto debería dar como resultado dos archivos de capa optimizados, uno con el estándar one-line-dojo.js más una entrada dojo.cache, que contiene los archivos de su aplicación. El uso del ejemplo sigue. Tenga en cuenta que aún necesita llamar para require cualquier módulo en caché o simplemente permanecerán en el caché.

Poniéndolo juntos en HTML

NOTA Poner su dojoConfig en el archivo ./js/App/Main.js no funcionará como se esperaba, los contenidos regulares de dojo.js se cargan sobre las capas.

<head>
  <script>
     function JITDialog() {
          require([ "App.JITDialog" ], function(dialoglayer)  {
             var dialog = new App.JustInTimeDialog();
             dialog.show();
          });
     }

     var dojoConfig = {
         async: true,
         packages:[{
            name:"App",
            location:"../../App"
         }]
     }
  </script>

  <script src="./js/lib/dojo/dojo.js"></script>

  <script>    
     require("App.Main", function() {
        // loads the layer, depending on the structure of App.Main class,
        // you can call your initializations here
        var app = new App.Main();
        app.run();
     });
  </script>

</head>
<body>
  <button onclick="JITDialog();">
      Download sub-module-layer and show a dialog on user interaction
  </button>
</body>