Translation-"Dojo tutorials" Creating Builds

Dojo's compilation system (Build, post-compilation) provides a way to compile dojo and your other JavaScript code and CSS files so that your application can use them efficiently in a production environment.

"Compiling" Dojo or JavaScript?

If you have used other programming languages, you may wonder why we are discussing "compile" issues with Dojo or JavaScript, because compiling usually means compiling the code into a machine language. But when we talk about Dojo's compilation, we're talking about a concept that minimizes code, optimizes performance, and concatenates code and removes useless code.

Whenever you send code from the server to the client to explain execution, such as javascript,html and CSS, it will cost bandwidth and time. How much you send depends on how many requests are sent to the server. It has nothing to do with how quickly your code executes, because you can't start executing code until the browser is loaded.

The Dojo compiler is a tool that allows code to run more efficiently on the client, including custom code, modules and CSS. If handled properly, you can create a compiled system that is easy to manage and maintain for your application.

Basis

Dojo's compilation system can be complex and highly customizable. It is designed to be extensible, although this tutorial does not talk about it. In addition, the new build system was introduced in Dojo 1.7 and backwards compatible with the previous version, it is almost completely rewritten, and in many cases it can be done better so that you don't have to look at the compiled code anymore, especially if you're using AMD syntax in your app.

Before you begin, there are several core concepts that need to be understood throughout this tutorial.

Modules and Packages

I hope you have understood the concept of the module before looking at this tutorial. If not, you should first look at the tutorial defining the module, which is the basis of Dojo 1.10. The modules are organized into packages, which group together the logically related modules. In Dojo 1.10, each package should have a Package.json file that describes the package. Many packages should also have package.js files that provide dojo-specified compilation information.

Dojo Configuration

Internally, Dojo has many configuration items that can be used in the app. Configuration is important not only when the app is running, it also affects the compilation of the app, potentially providing these configurations as part of the compilation process. If you are not familiar with dojo configuration, you should first look at using Dojoconfig to configure Dojo.

Layer

A layer is essentially a single JavaScript file that contains several modules, sometimes other resources. A layer is usually the compiled output you want to look up, and your app becomes distributable after you create it. A layer can be a boot layer that contains Dojo's startup code, allowing dojo to load other modules. What layer you have and what content it is, depending on your application and design, is not a unified approach.

Compiling the configuration file

The compilation configuration file is a small JavaScript file that provides the compiler with information on how to compile the code. In the compiled system, there is a configuration, in the Util/buildscripts/profiles directory, contains everything you need. Starting with dojo 1.7, it becomes more flexible, each package should have a compilation configuration, and then there should be a master configuration that tells the compiler that those packages and layers should be compiled, as well as the configuration of the optimized code.

Minimized

The concept is to compress JavaScript code smaller and maintain the original functionality. This is great from an efficiency point of view, and some developers like to confuse the code, but that makes debugging difficult. This is the reason why you don't want to develop the compiled code. The Dojo compiler uses two tools to minimize the size of the application. The first is Shrinksafe, which can only compress the code before 1.7. After the 1.7 code, compile using Google's closure Compiler.

Remove useless code

One of the biggest advantages of Google Closure compiler is the ability to detect code that is not executed and remove them in a compressed version. A few years ago, we started a project called Dojo Linker to solve a similar problem, but there was no time to finish it, so there was an option we were happy with. The feature was conceived in the dojo design. Some "handles" can be set at compile time, so that the compiler "hard code" in the path to the output code, when the optimization is started, Closure compiler detect those that do not execute the code and delete them to achieve the purpose of reducing the file.

Compile control, transfer and analyzer

These are the basic compilation blocks of the compiled system. You don't need to know them specifically, but if you're interested in high-level compilations, you can modify them to do something interesting. The compilation control is a collection of compiled directives that read the configuration to determine what transport to use with the parser. Transmission is doing what it literally says, talking about something and then transmitting it to something else; The parser is a compile-time solution to the AMD plug-in module. For example, if you use Dojo/text to load a pendant template, the template file is placed in a compressed file at compile time.

What do you need?

In order to use the Dojo compilation system, you must have the complete dojo SDK. The Standard Edition has been compiled using the compiled system. The compilation tool itself relies on Java (with an optional quick scenario: node. js), so make sure that these dependencies are already installed.

Decorate your App

This is a big challenge for the group, especially if you want to go beyond the basic application. We note that those who migrated from Dojo 1.6 or earlier have a far-reaching application structure to our expectations. This means that there are quite a few people who have to face the challenge of migrating their application to 1.7 or later. So you need to consider some of the structure of your files before you can finish your application in depth.

In the root directory there is a folder like SRC with all the packages. Probably looked like this:

Dojo's main (Dojo,dijit and Dojox) packages are in the same directory as other packages, including your custom package, plus Dojo's toolkit (util).

If you don't do it like a little bit, Dojo boilerplate has everything you need to run, not just the basic application framework, but what you've already configured to compile directly.

Package

The future is compiled with a compilation system, and there must be two files in the application's package directory. The first is a COMMONJS packages/1.0 package description, usually named Package.json, placed in the root directory of the package. The second is the compilation configuration file, which contains the content that describes how the compilation tool handles the package. This is the two main contract named file. In the Dojo toolset, it is named <packagename>.profile.js and placed in the root directory of the package. There is an alternative to the package configuration file named Package.js placed in the root directory of the package. You will see this practice in the Dojo Feature Pack.

One thing to note is that you have to put your entire application code in a package, and if you need to separate your code (such as for code reuse, split into Shared/common modules), you need to create these files for each of them.

Package description

The package description file (Package.json) provides some information about the current package, such as package name, dependency package, authentication license and bug tracking, and so on. For the compiler system, the key is the key dojobuild, it is best to provide a name, version and description. The dojobuild is used to point to the package's compilation configuration file. For example, a package called app, its description file package.js is as follows:

1 {2"Name": "App",3"description": "My application.",4"Version": "1.0",5"keywords": ["JavaScript", "Dojo", "Toolkit", "DojoX"],6"Maintainers": [{7"Name": "Kitson Kelly"8     }],9"Contributors": [{Ten"Name": "Kitson Kelly" One     },{ A"Name": "Colin snover" -     }], -"Licenses": [{ the"Type": "AFLv2.1", -"url": "Http://bugs.dojotoolkit.org/browser/dojox/trunk/LICENSE#L43" -     },{ -"Type": "BSD", +"url": "Http://bugs.dojotoolkit.org/browser/dojox/trunk/LICENSE#L13" -     }], +"Bugs": "Https://github.com/example/issues", A"Repositories": [{ at' type ': ' Git ', -"url": "Http://github.com/example.git", -"Path": "Packages/app" -     }], -"Dependencies": { -"Dojo": "~1.10.3", in"Dijit": "~1.10.3", -"Dojox": "~1.10.3" to     }, +"Main": "src", -"Homepage": "http://example.com/", the"Dojobuild": "App.profile.js" *}

CommonJS packages/1.0 provides a full list of possible options for package description. If your code is only used internally, you can streamline it, but at the very least have the dojobuild option.

Package compilation Configuration

The package compilation configuration file is the primary configuration of the compiled system. It is a JavaScript file that is used to build a configuration object that contains instructions for creating a fully functional application. A basic build configuration looks like this:

1 varProfile = (function(){2     return {3 resourcetags: {4Amd:function(filename, mid) {5                 return/\.js$/. Test (filename);6             }7         }8     };9})();

Note that we have performed an anonymous function. This ensures that other code in your environment does not affect your configuration files. This also gives you the opportunity to more flexibly generate configuration objects that contain calculations.

The compilation configuration is connected by Dojobuild, and if it is not the main compilation configuration of the application, it only needs to include the RESOURCETAGS directive.

This provides the compiler the minimum information to compile your package. As for what happens when the compiler reads this packet, each file is passed to the Resourcetags function to decide whether it will receive processing. These functions have two parameters, a file name and a module ID. If the function returns True, this tag is applied (which, of course, does not apply when it returns false).

The files that mark these JS endings are AMD modules, which the compiler will also handle, without assuming they are legacy dojo modules. Here are some other tags that you want to use to tag your resources:

Amd

AMD Module Resources

Declarative

This resource is used to declare tags, and you want to scan packages for dependencies.

Test

This resource is part of the package test code.

Copyonly

This resource only needs to be copied to the target directory, and the rest will remain unchanged.

Miniexclude

If the resource is already minimized, you do not need to copy to the destination directory.

If you do not mark your module for AMD, but it is indeed true, the compiler will prompt this module to be AMD and continue to process it, but it is best to clearly mark your code.

Using the declarative tag has exceeded the scope of this tutorial. For more information about it, see the Reference guide depsdeclarative.

It is important to make sure that you have properly labeled your resources for the compiler to properly handle them. Let's say you put the test code under directory Src/app/tests (because all good program apes do unit tests for his package, right?). ), plus Profile.json with some other types of files I want to just copy them. So a more complete configuration should look like this:

1 varProfile = (function(){2     varTestresourcere =/^app\/tests\//,3         //checks if mid is in app/tests directory4  5Copyonly =function(filename, mid) {6             varList = {7"App/app.profile":true,8                 //we shouldn ' t touch our profiles9"App/package.json":trueTen                 //we shouldn ' t touch our Package.json One             }; A             return(MidinchList) | | -(/^app\/resources\//. Test (mid) -&&!/\.css$/.test (filename)) | | the/(Png|jpg|jpeg|gif|tiff) $/. Test (filename); -             //Check If it is one of the special files, if it's in -             //App/resource (but not CSS) or was an image -         }; +   -     return { + resourcetags: { ATestfunction(filename, mid) { at                 returnTestresourcere.test (mid) | | mid== "App/tests"; -                 //Tag our test files -             }, -   -Copyonly:function(filename, mid) { -                 returncopyonly (filename, mid); in                 //Tag Our copy only files -             }, to   +Amd:function(filename, mid) { -                 return!Testresourcere.test (mid) the&&!copyonly (filename, mid) *&&/\.js$/. Test (filename); $                 //If It isn ' t a test resource, copy only,Panax Notoginseng                 //but is a. js file, tag it as AMD -             } the         } +     }; A})();

As you can see, you could quickly be complicated, but the essence of this concept is that the configuration file requires a hash containing resourcetags, which contains the set of functions that represent the different tokens. You can use powerful JavaScript to assign corresponding tags to different resources.

For a separate package profile, and how to tag its resources, you can look at the Dgrid configuration file.

Apply compilation configuration

To put a package into a compiled version, you just need to complete the above mentioned and tag your resources. But if you want to create a compiled version that is conducive to the build environment, we also need some additional options. There are two ways that if you should have only one simple package that contains all the custom code, you might want to create a full package profile in your app. If your application is more complex and has multiple packages, or if you want to set different compilation configurations for different compilations, you should create an app profile.

For the next tutorial, we assume you want to create an application-level configuration called Myapp.profile.js, which is under the application's root directory.

Some of the key options for creating a fully-compiled configuration for the structure are as follows:

Option	Type	Description
BasePath	Path	This is the root of the compilation, and then the compilation of the class is calculated from here. The file location of the associated compilation configuration.
Releasedir	Path	Compiling the target directory, the compiler overwrites everything it finds and is associated with BasePath.
Releasename	String	It is the output name for the release version. It follows after the Releasedir. For example, if you want to release the code into RELEASE/PRD, set Releasedir to release, Set Releasename to PRD
Action	String	Should be set to release
Packages	Array	The module used by the compiler. Used for flexible modules that point to other places, and to put together custom code at compile time.
Layers	Object	Allows the creation of different layer modules as part of the compiled version, and the careful functionality is compiled into a separate file.

If we are going to build an application configuration, we have two files that we want to load into a single page application. One is the dependency of our code, and the other is in some cases loaded as needed:

1 varProfile = (function(){2     return {3BasePath: "./src",4Releasedir: ". /.. /app ",5Releasename: "Lib",6Action: "Release",7  8 packages:[{9Name: "Dojo",TenLocation: "Dojo" One         },{ AName: "Dijit", -Location: "Dijit" -         },{ theName: "Dojox", -Location: "Dojox" -         },{ -Name: "App", +Location: "App" -         }], +   A layers: { at"Dojo/dojo": { -Include: ["Dojo/dojo", "dojo/i18n", "Dojo/domready", -"App/main", "App/run" ], -Custombase:true, -Boottrue -             }, in"App/dialog": { -Include: ["App/dialog" ] to             } +         } -     }; the})();

If we were to compile this configuration now, what would happen if we had a module with four packages under App/lib, plus two specially named Files App/lib/dojo/dojo.js and App/lib/app/dialog.js, which contained the compiled versions of the modules they needed.

Here we overlook the complexity of the layer, and we'll get into it later.

Compilation optimizations

Removing code that will not be executed

Layer

Default configuration

Put them together.

Compile

Summarize

Other resources

Translation-"Dojo tutorials" Creating Builds