Package.js現代化JavaScriptプロジェクトmakeツール

4658 ワード

Package.jsプロジェクトの住所:http://code.google.com/p/package-js/

Package.jsはJavaScriptパッケージ依存管理及びMakeツールです.その設計目標は、ブラウザ側のJavaScript Component/Appの開発をよりモジュール化することです.もしあなたが小さなウェブサイトを開発しているだけで、HTMLに何行かのJSコードを混ぜて書いてユーザー体験を改善するだけでは、Package.jsはあなたに合わないかもしれません.もしあなたが開発している中で大きなWebAppには、JSファイルとCSSファイル、HTMLテンプレートファイルが何十個かあります.これらのJSモジュール間の依存とローディングを管理するために悩んでいるならば、生産環境に発表する時にJSファイルをパッケージ化してMakefileを書いて頭がくらくらします.Package.js、これはあなたのほしいものです.早く調べて、Package.jsを使いましょう. Package.jsは主に2つの部分がブラウザで実行されています.define及びimportモジュールのJSライブラリAPIはnode.js環境で実行されています.すべてのJSカバンとその依存CSSとHTMLファイルを統合したmakeツールPackage.jsブラウザ端のAPIはComonJS/AMD仕様を参照しています.この規格の最も簡単な形式に対応して、ここで文法を拡張しています.CSS及びHTMLテンプレートを含むJavaScript UIコンポーネントの開発を容易にする.
直接にPackage.jsを使って開発したプロジェクトのカタログ構造を見てみましょう.簡単明瞭です.

 
  
Test 
  
├── dom 
  
│ └── Style.js #     Test.dom.Style      
  
├── init.js #           
  
├── _nsconf_.js #Package.js         
  
├── ui 
  
│ ├── Button 
  
│ │ ├── img 
  
│ │ │ └── bg.png 
  
│ │ ├── init.js #Test.ui.Button          
  
│ │ ├── style.css #UI   CSS   
  
│ │ └── tpl.html #UI   HTML     
  
│ └── Form 
  
│ ├── init.js 
  
│ ├── style.css 
  
│ └── tpl.html 
  
├── util 
  
│ └── Cookie.js #     Test.util.Cookie JS  
  
└── _xproxy_.html -> ../Package/_xproxy_.html #    Soft Link  Package.js    Package/_xproxy_.html，      HTML

Package.jsを使って、モジュールの定義文法――
Root/ui/Button/init.jsコード:

 
  
Package.define("Root.ui.Button",["Root.ui.Pane","Root.util.Tpl","Root.util.Event"], 
  
function (Pane,Tpl,Event) { 
  
//Pane Root.ui.Pane 
  
//Tpl  Root.util.Tpl 
  
//     
  
//..... 
  
});

CommunJSのAMD仕様とは異なり、Package.jsの文法では、JSモジュールは他のJSパッケージに依存するだけでなく、CSSやHTMLテンプレートファイル、その他のJSONデータファイルに依存して、実行時に依存する他のファイルの内容を取得することができます.定義文法は以下の通りです.

 
  
Package.define("NS.ui.Button",["MT.ui.Component"], 
  
{ 
  
tpl:"tpl.html", 
  
_style:"style.css" 
  
},function (Component) { 
  
//  this.assets.tpl  tpl.html   
  
var bgImgUrl=this.path+"img/bg.png",tpl=this.assets.tpl; 
  
function Button(opt) { 
  
//       Package   _pkgMeta_    assets 
  
this.tpl=String2Dom(opt.tpl || Button._pkgMeta_.assets.tpl); 
  
} 
  
return Button; 
  
})

ブラウザでは、以下の方法でJSモジュールを導入できます.
導入の過程で、Package.jsは自動的に後方勤務の仕事をしました.1、このモジュールの依存モジュールをロードします.2、依存のHTMLとCSSファイルをロードします.

 
  
Package.imports(["Root.ui.Button"],function (Button) { 
  
var btn=new Button(); 
  
btn.renderTo(document.body); 
  
});

開発に際しては、モジュール化のために、JSを小さいモジュールファイルに分類する必要がありますが、生産環境に公開する際には、これらのJSファイルを単一のJSファイルに統合して圧縮する必要があります.同様に、CSSファイルも統合します.

 
  
//         
  
//build-config.json     
  
{ 
  
"staticUrls": {"defaults":"http://statics.iwt.macrotarget.com/jslibs/"}, 
  
"nsconfs":["http://www.cnblogs.com/statics/jslibs/XLib/_nsconf_.js"], 
  
"includes":["XLib.apps.MainApp","XLib.ui.*"], 
  
"compress":true //  UglifyJS UglifyCSS     
  
}

Package.jsを利用して、この機能を完成します.JSON設定コードを3,4行書いて、命令を実行するだけで、全部OKです.

 
  
#     
  
build.js build-config.json js all.min.js 
  
build.js build-config.json css all.min.css 
  
#    ，    ！

参照
PS:build.jsはCSSファイルのbackground:url()などの相対パスを絶対URLに変換することもできます.開発時、CSSでurl()は常に相対的な経路だけを書く必要があります.生産環境に配置されると、build.js統合後のCSSは自動的に絶対URLに変換します.さらに、IE 6 Png AlphaImage Loaderフィルタを使用して、wui 4 ie 6のloaderを使用して、Src=に相対パスを書くことができます.開発モードでは、Package.jsも自動的にURLを使用したCSS Ruleを生成します.パッケージ化時にはAlphaImageLoaderのsrcに変換します.
Package.jsは他のモジュールキャリアとAMD実装(RequireJS、SeaJS…)と比べて、どのような利点や欠点がありますか?
Package.jsはWeb App Fraamewark向けに開発されたもので、文法やファイルディレクトリの構造を定義するのは厳しい(あるいはやや複雑な).AMD仕様の中で最も簡単なdefine文法だけを使用しています.
Package.jsはJSモジュールのCSS及びHTMLファイルへの依存性を他のJSモジュールへの依存度とdefine書き方で区別し、またbuild.jsにはCSS、HTML、JSONパッケージに対する処理も含まれています.
(TOT)IE 6 CSSに対する特別な配慮が含まれています.
PackageMetaを追加して、JSモジュールを実行する時に自分のURLを知ることができます.
…短所を計算すると、CommunJS AMD仕様と完全に互換性がない
buildの場合、3つのエクスポートモードをサポートします.includeps、all
開発モードの方が便利です.xproxy.)ドメインをまたいでロードします.代理は必要ありません._を使うnsconf_.js、pathsを配置する必要はありません.
これらの簡単な紹介を聞いてから、Package.jsに対して意欲的になったかもしれません.使う前に、参考にしてください.
Package.jsの詳細文書:http://package-js.googlecode.com/hg/docs/Package.html.

はい遅れた方法でJavaScript Appを開発しないで、Out Manをしないで、早くPackage.jsを使いましょう.

mergSortによるいくつかの思考