Javascript依存の管理とパッケージ化

Question

私はJavascriptファイルの依存関係を最適に管理し、100％フロントエンドアプリケーションのパッケージ化を駆動する方法を見つけようとしています。要するに、backbone.jsといくつかの他のライブラリを使用してアプリケーションを構築しています。私は組織化されたコードベースが必要で、各ファイル内の依存関係を宣言できるようにしたいと考えています。理想的には、これらの宣言は、a）ファイルがブラウザによってロードされる順序を駆動し（開発中はファイルを別々にロードしたい）、パッケージングスクリプトが連結のためにスクリプトをロードする順序を駆動する（私は、アプリ全体の1つのファイル）。

私はrequirejsとcommonjsを読んできましたが、私は確信していません。

私は好きなことをするためにcat <file> <file> <file> <file> > concatenated.fileを使用しているシンプルなシェルスクリプトを持っていますが、最新のファイルリストを正しい順序で維持するのは苦労します。各javascriptファイルの最初に依存関係を宣言し、その情報を使用してスクリプトを連結/ロードすることについて、パッケージャとローダーに賢明にさせることは、はるかに簡単です。

提案がありますか？複雑なフロントエンドのために

おかげで、あなた、

ルイス

Answer 1

は非同期モジュール定義（AMD）形式が最良の選択であるアプリ。 AMD（curl.js,RequireJS）をサポートしている偉大なローダーがたくさんあります。

私はjavascriptのdependecy経営の近代的なアプローチについて学ぶためにこの記事お勧め：包装のため

Writing Modular JavaScript With AMD, CommonJS & ES Harmony

Why AMD?

は、考慮にCommonJS仕様を取るいくつかの実装が存在し、それは好みの問題ですいずれにしても、その仕様の一部に準拠したツールを選択することをお勧めします。

Answer 2

私は自分自身をstealjsに部分的です。これはJavascriptMVCの一部ですが、Backbone.jsで使用できない理由はありません

この記事のすばらしさは、あなたのcssとjsを小さくし、すべてを2ファイル：production.cssとproduction.js。

これは非JSファイルのロードも処理できますので、steal（ 'somefile.css'）のようにすることができます。次に（function（）{...}）;その非常にあなたのようなファイルは、他の言語でどうなるのために

：

steal(dep1, dep2, dep3).then(function() { 
    // code 
}); 

Answer 3

それぞれのJavaScriptファイルの初めの依存関係を宣言できるようにするにははるかに容易にし、必要があるだろうpackagerとローダーは、その情報を使用してスクリプトを連結/ロードすることについて賢明です。

私は数ヶ月前に同じ考えを持っていたし、すでに（オプションdebugパラメータで、開発とデプロイされたバージョンの間distinuishする必要性を含む）私にとって、それは容易になり、私のResource Builderの依存リゾルバに取り組んでいます。

JsDoc Toolkit（および関連する取り組み）（この構文はサポートされています）e。 g。 Eclipse JSDTによって、@requiresタグが提供されるので、それを使用することができます。しかし、依然として依存関係を解決することは簡単な作業ではありません（ResourceBuilder::resolveDeps()参照）。 （究極の目標は、すべてのタグなしで、自動的に依存関係を解決するために、静的コード分析を使用することです。）

これは、非同期ローダーに関しては単なる

<script type="text/javascript" src="builder?src=dom/css"></script> 

に現在

<script type="text/javascript" src="builder?src=object,types,dom,dom/css"></script> 

を低減するであろう：非同期ローダーの良い点は、高速であることです。非同期ローダーに関する悪い点は、 - 動作している場合、彼らはすべて非標準的なアプローチに基づいています。スクリプトが提供する機能が以下のスクリプトで利用できることを確かめることができないほど高速です。したがって、リスナーがコードを実行する必要があります。オンデマンドでのみ必要な機能をアプリケーションに実際に持たない限り、それらを避けることをお勧めします。