![\"\"](\"guides/command_compiler_meta/../command/sencha-command-128.png\")
Contents
\n\nThe metadata tracked by the Sencha Cmd compiler has a variety of uses, some of which we'll\nexamine in this guide. To support these uses, the compiler can export and format this\nmetadata in several different ways, which we'll cover here, as well.
\n\n
One of the major new dimensions provided by the compiler is its ability to export metadata\nin various formats. This feature is used to produce the ext.js \"bootstrap\" file that\ncontains various classes and a block of metadata about all of the files in the\nframework.
There are several forms of metadata that the compiler can export using the meta command:
Note. This process is handled automatically for applications generated by Sencha Cmd. If\nyou are not using Sencha Cmd generated application, this section describes how to achieve\nthe same results manually.
\n\nThe primary use for the meta command is to create your own \"bootstrap\" file. This file\ngives the framework the same level of awareness of your application code that it has of\nthe framework code itself.
The simplest way to manage your bootstrap file is to store it alongside your markup file.\nIf that won't work for you, read on to see how to manage relative paths. If you have your\nmarkup file in a source folder in your classpath, you need to tell the compiler to ignore\nthe bootstrap file. Do this using the -ignore switch:
sencha compile -classpath=sdk/src,app -ignore bootstrap.js \\\n ...\nrequiresThe end of \"ext-debug.js\" contains these two function calls:
Ext.ClassManager.addNameAlternateMappings({\n \"Ext.draw.engine.ImageExporter\": [],\n \"Ext.layout.component.Auto\": [],\n ...\n]);\n\nExt.ClassManager.addNameAliasMappings({\n \"Ext.draw.engine.ImageExporter\": [],\n \"Ext.layout.component.Auto\": [\n \"layout.autocomponent\"\n ],\n ...\n]);\nIt is the presence of these two pieces of metadata that allow wildcards to be used in\nrequires statements. That is:
Ext.define('MyApp.App', {\n requires: [\n 'Ext.grid.*'\n ],\n ...\n});\nAll that is required to use wildcards in your own code is to provide the same bootstrap\ndata for your app.
\n\nThis command will produce a file that does just that:
\n\nsencha compile -classpath=app \\\n meta -alias -out bootstrap.js and \\\n meta -alt -append -out bootstrap.js\nThe above command line tells the compiler to read in the source in the app folder and\ngenerate two pieces of metadata. The second piece of metadata is written to the same\noutput file as the first, but using the -append option to append to the file and not\nreplace it.
Once you have the \"bootstrap.js\" file, change your page like so to add it to the\nx-bootstrap section:
<html>\n <head>\n <!-- <x-compile> -->\n <!-- <x-bootstrap> -->\n <script src=\"../sdk/ext-dev.js\" type=\"text/javascript\"></script>\n\n <script src=\"bootstrap.js\" type=\"text/javascript\"></script>\n <!-- </x-bootstrap> -->\n\n <script src=\"app/app.js\" type=\"text/javascript\"></script>\n <!-- </x-compile> -->\n </head>\n <body></body>\n</html>\nThe \"bootstrap.js\" file needs to be regenerated if you do any of the following:
This rebuild of the bootstrap data can be handled in a variety of ways, but the fundamental\nquestion is whether to keep these files in source control or require developers to\ngenerate them locally. Both approaches work and can be automated to some degree.
\n\nNote. For applications generated by Sencha Cmd, this is handled as part of the build\nprocess of sencha app build. Alternatively, refreshing just the bootstrap instead of\nperforming a full build is accomplished by the sencha app refresh command.
In large applications it can be helpful to organize your namespace using multiple source\ntrees. In fact, Ext JS itself uses three source trees. This approach, however, has always\npresented problems for the dynamic loader requiring loader paths to be configured by hand\nto work around the issue. The compiler, however, has complete knowledge of class-to-file\nrelationships given all of the source in the classpath. And the meta command can export\nthat data for use in your application.
If you are already sold on the above to create a \"bootstrap.js\", this data can be added by\nadding one more meta command (of course, the classpath will contain multiple folders in\nthis case):
sencha compile -classpath=src1,src2,src3 \\\n meta -alias -out bootstrap.js and \\\n meta -alt -append -out bootstrap.js and \\\n meta -loader -append -out bootstrap.js\nNow the \"bootstrap.js\" file solves both problems. With this approach, the following things\nwill also require you to rebuild \"bootstrap.js\":
Note. This part is also handled automatically for applications generated by Sencha Cmd.
\n\n-base-pathFor many good reasons, paths need to be relative. Whenever you deal with relative paths,\nhowever, you need to solve the problem of where those relative paths are based. In the\nabove examples we cheated a bit and placed the \"bootstrap.js\" file next to the markup\nfile. This leverages the fact that the meta command defaults the base folder to the\nlocation of the output file.
In the above examples we cheated a bit and placed the \"bootstrap.js\" file next to\nthe markup file. This leverages the fact that the meta command defaults the base folder\nto the location of the output file.
When this is not the case, you need to tell the meta command the base for determining\nrelative paths. Let's say we want to move the \"bootstrap.js\" file in to the \"build\" folder\n(perhaps because we are not keeping it in source control). Since our page is in the current\nfolder and our source is in the \"app\" folder, this will generate the proper relative paths:
sencha compile -classpath=src1,src2,src3 \\\n meta -alias -out build/bootstrap.js and \\\n meta -alt -append -out build/bootstrap.js and \\\n meta -loader -append -base-path . -out build/bootstrap.js\nSince the -alias and -alt modes do not deal in paths, the -base-path option is only\nneeded on the -loader use of the meta command.
By default, the meta command exports metadata in JSONP format using a function call\nwrapper appropriate for the type of metadata requested. If a different function call is\ndesired or you want the data in JSON format, you can request this in the meta command.
In the example below, the aliases.json file will contain the alias data in JSON format.\nYou cannot use -append in this case because JSON format requires a single, top-level\nobject or array.
sencha compile -classpath=src1,src2,src3 \\\n meta -alias -json -out aliases.json\nIn this next example, we customize the JSONP wrapping by supplying the function to call:
\n\nsencha compile -classpath=src1,src2,src3 \\\n meta -alias -jsonp Foo.bar.doAliases -out aliases.js\nThis form can work with -append because it produces JavaScript code. The output of the\nabove looks roughly like this:
Foo.bar.doAliases(\n // ... the JSON data ...\n);\nAn occasionally useful form of metadata supported by the meta command is filename data.\nThat is, the list of a files in the proper, dependency order. In many ways this is the same\nas the other meta data forms in that this data can be exported in JSON or JSONP format, and\ncan be combined using -append.
The first difference with -filenames is that the default format is text. To produce JSON\nor JSONP, you must specify one of the -json or -jsonp options.
In the default mode of text, the filenames are written as lines of text, one filename per\nline. The following command will create \"filenames.txt\":
sencha compile -classpath=src1,src2,src3 \\\n meta -filenames -out filenames.txt\nEach line of the file can be decorated using the -tpl option. Because of the special\ncharacters needed for this example, we use a response file to hold the template. We put\nthis in \"template.txt\", like this:
<script src=\"{0}\" type=\"text/javascript\"></script>\nThen run the following command.
\n\nsencha compile -classpath=src1,src2,src3 \\\n meta -filenames -tpl @template.txt -out filenames.txt\nWe now have a chunk of markup that will script-tag in all of the files in their correct order.
\n\nThe compiler normally reads metadata such as classes, namespaces and dependencies by parsing\nsource code. In situations where this is hidden, for example, when obfuscating a library,\nthe compiler will be unaware of any defined classes or their dependencies.
\n\nThis form of metadata export can be used to provide the \"symbols\" for such libraries so\nthat users can still compile their application using Sencha Cmd.
\n\nsencha compile -classpath=src1,src2,src3 \\\n meta -definitions -out symbols.js\nThe above creates a file that contains directives like this:
\n\n//@define Foo.bar.Thing\n//@require Ext.panel.Panel\n//@uses Ext.layout.container.HBox\nThese directives are recognized by the compiler and introduce the symbolic names needed for\nuser code to compile. These symbols should be added to the obfuscated library file to ensure\nthat the library code is concatenated in the right order.
\n"});