Package. js: A modern JavaScript project make Tool

Package. js Project address:Http://code.google.com/p/package-js/ 

Package. js is a convenient JavaScript Package dependency management and Make tool. It is designed to make JavaScript Component/App development on the browser more modular. If you are only developing a small website and write several lines of JS Code in HTML to improve user experience, Package. js may not be suitable for you. If you are developing a medium-to large-sized WebApp with dozens or even hundreds of thousands of JS files, CSS files, and HTML template files, if you are worried about managing the dependencies and loads between these JS modules and are dizzy when writing Makefile to merge and Package JS files in the production environment, Package. js, this is what you want! Come and learn about and use Package. js!

Package. js consists of two parts:

JS library API running in the browser for define and import module
The make tool that runs in the node. js environment and combines all JS packages and their dependent CSS and HTML files

For more information about the APIs of the Package. js browser, seeCommonJS/AMDIt is compatible with the simplest form of this specification and extends some syntaxes to facilitate the development of JavaScript UI components including CSS and HTML templates.

Let's take a look at the directory structure of the project developed using Package. js, which is simple and clear:
Copy codeThe Code is as follows:
Test
── Dom
│ ── Style. js # The namespace is the module File of Test. dom. Style.
── Init. js # Root namespace Initialization File
── _ Nsconf _. js # configuration file that Package. js will read
── Ui
│ ── Button
│ ── Img
│ ── Bg.png
│ ── Init. js # Test. ui. Button module file of the namespace
│ ── Style.css # CSS file of the UI component
│ ── Tpl.html # HTML template file of the UI component
│ ── Form
│ ── Init. js
│ ── Style.css
│ ── Tpl.html
── Util
│ ── Cookie. js # The namespace is the JS package of Test. util. Cookie.
── _Xproxy_.html-> ../Package/_xproxy_.html # This file points to Package/_xproxy_.html in Package. js source code for cross-origin loading of HTML template files

Use Package. js to define the module Syntax --
Root/ui/Button/init. js code:
Copy codeThe Code is as follows:
Package. define ("Root. ui. Button", ["Root. ui. Pane", "Root. util. Tpl", "Root. util. Event"],
Function (Pane, Tpl, Event ){
// Pane is Root. ui. Pane
// Tpl corresponds to Root. util. Tpl
// So on
//.....
});

Unlike the AMD specification of CommonJS. in the js syntax, a JS module can depend not only on other JS packages, but also on CSS and HTML template files and other JSON data files. At runtime, obtain the content of other dependent files. The syntax is as follows:
Copy codeThe Code is as follows:
Package. define ("NS. ui. Button", ["MT. ui. Component"],
{
Tpl: "tpl.html ",
_ Style: "style.css"
}, Function (Component ){
// Pass this.assets.tpl tpl.html content
Var bgImgUrl = this. path + "img/bg.png", tpl = this. assets. tpl;
Function Button (opt ){
// You can also access assets through the _ pkgMeta _ attribute of the current Package object
This. tpl = String2Dom (opt. tpl | Button. _ pkgMeta _. assets. tpl );
}
Return Button;
})

In a browser, you can use the following method to import a JS module,
During the import process, Package. js will automatically help you with the logistics work: 1. Load the dependency module of this module. 2. Load the dependent HTML and CSS files.
Copy codeThe Code is as follows:
Package. imports (["Root. ui. Button"], function (Button ){
Var btn = new Button ();
Btn. renderTo (document. body );
});

During development, to be modularized, You need to divide JS into a small module file, but when published to the production environment, in order to consider loading speed, you need to merge these JS files into a single JS file and compress them. Similarly, CSS files must also be merged together.
Copy codeThe Code is as follows:
// Your packaging configuration file
// Contents of the build-config.json File
{
"StaticUrls": {"defaults": "http://statics.iwt.macrotarget.com/jslibs "},
"Nsconfs": ["http://www.cnblogs.com/statics/jslibs/XLib/_nsconf_.js"],
"Des": ["XLib. apps. MainApp", "XLib. ui. *"],
"Compress": true // use UglifyJS and UglifyCSS for compression
}

With Package. js, you only need to write three or four lines of JSON configuration code and execute a command to complete this function.
Copy codeThe Code is as follows:
# Execute commands
Build. js build-config.json js all. min. js
Build. js build-config.json css all.min.css
# The waist is no longer sour, and the leg does not hurt!

Reference

PS: build. js also helps you do a little thing: Convert relative paths such as background: url () in CSS files to absolute URLs. During development, the url () in CSS always only needs to write relative paths. when deployed to the production environment, the CSS after the build. js merge will automatically convert it to an absolute URL. Even if you use IE6 Png AlphaImageLoader filter and wui4ie6 loader, you can still write the relative path in src = during development. In development mode, Package. js will also automatically generate CSS Rule that uses absolute URLs, and convert the src of AlphaImageLoader during packaging. Absolute URLs are never required in CSS.

Compared with other module loaders and AMD implementations (RequireJS, SeaJS...), what are the advantages and disadvantages of Package. js?

Package. js is designed for Web App Framework development. Its definition syntax and file directory structure are strict (or slightly complex) and only uses the simplest define syntax in AMD specifications.
Package. js separates the dependency of the JS module on CSS and HTML files from those of other JS modules in define writing and builds. js also contains the processing of CSS, HTML, and JSON packaging.
(TOT) includes special care for IE6 CSS (no way, our own project needs)
Add PackageMeta. a js module can know its own URL at runtime.
... If it is a disadvantage: not fully compatible with the CommonJS AMD Specification
Three export modes are supported during build: includes, deps, and all.
More convenient in development mode: Use _xproxy_.html for cross-origin loading without a proxy. Use _ nsconf _. js without configuring paths.

After hearing these simple introductions, you may be eager to try Package. js. before using it, you can refer
For details about Package. js, visit http://package-js.googlecode.com/hg/docs/package.html. 

Good! Do not develop JavaScript apps in backward ways, and do not do Out Man again. Use Package. js now ^ O ^