クライアント側のJavaScript依存関係を管理する方法は？[閉まっている]

サーバー側の依存関係を管理する優れたソリューションはありますが、一貫したクライアント側のJavaScript依存関係管理ワークフローを使用するという私のニーズをすべて満たすソリューションは見つかりませんでした。次の5つの要件を満たしたいです。

1. NPMのと同様の形式で、私のクライアント側の依存関係を管理package.jsonか亭さんbower.json
2. dependency.jsonあまり知られていないライブラリのファイルでgit repoまたは実際のjsファイル（ウェブ上またはローカルのいずれか）を指す柔軟性が必要です（npmではgit reposを指定できます）
3. それはのような単一のファイルにすべてのライブラリを縮小化し、名前空間べきでエンダー私は私の中に置く必要があるだろう唯一のjsファイルです- <script>クライアント側でタグ
4. BoxJS 4のようなCoffeeScriptをそのままサポートする必要があります（現在は無効）

5. ブラウザでは、次のいずれかのスタイルを使用できるはずです。

   var $ = require('jquery');
   var _ = require('underscore');

   あるいは、headjsスタイルを実行します。

   head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
     // executed when all libraries are loaded
   });

そのような単一のツールが存在しない場合、volo（またはgrunt）のようなものを使用して組み合わせることができるツールの最適な組み合わせ、つまりツールチェーンは何ですか？

私はここでリンクしているすべてのツールをすでに調査しており、それらのツールは、最大で個別に最大3つの要件のみを満たします。したがって、これらのツールについて再度投稿しないでください。私の5つの要件をすべて満たす単一のツールを提供する回答、または誰かが私の要件をすべて満たすそのような複数のツールのツールチェーンの具体的なワークフロー/スクリプト/作業例を投稿した場合の回答のみを受け入れます。ありがとうございました。

require.jsは必要なすべてを行います。

この質問への私の答えはあなたを助けるかもしれません

例：

クライアントアプリプロジェクトの階層：

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

main.jsは、クライアントアプリケーションを初期化し、require.jsを構成する場所です。

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

依存関係は、「cs！」が前に付いたときにcsプラグインを使用します。csプラグインはcoffeescriptファイルをコンパイルします。

本番環境に入ると、プロジェクト全体をr.jsでプリコンパイルできます。

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

要件は次のとおりです。

• クライアント側の依存関係をnpmのpackage.jsonまたはbowerのcomponent.jsonと同様の形式で管理します。違うけど、いいね！

• あまり知られていないライブラリの場合、dependency.jsonファイルでgit repoまたは実際のjsファイル（Webまたはローカルのいずれか）を指定できる柔軟性が必要です（npmでgit reposを指定してみましょう）。はい

• それはすべてのライブラリを縮小して名前空間をenderのような1つのファイルにする必要があります-これはクライアント側のスクリプトタグに挿入する必要がある唯一のjsファイルです。はい、r.jsを使用します。

• それは、Boxのようなcoffeescriptのボックス外サポートを持っている必要があります。はい

• ブラウザでは、requireスタイルまたはheadjsを使用できます。はい

http://requirejs.org/はあなたが探しているものだと思います

@ Guillaume86のように、裾はあなたがなりたい場所に最も近くなると思います。

裾では、npmと裾の組み合わせを使用して依存関係が管理されます。npmを使用して、プロジェクトのすべての外部依存関係を明示的にインストールします。ヘムを使用して、クライアント側の操作のためにどの依存関係（外部とローカルの両方）を結合するかを指定します。

これのスケルトンプロジェクトを作成したので、これがどのように機能するかを確認できます。https：//github.com/dsummersl/clientsidehemで確認できます。

依存関係を追加する

npmを使用して特定の依存関係を検索し、package.jsonファイルを変更して、依存関係が将来追跡されるようにします。次に、slug.jsonでアプリケーションの依存関係を指定します。

たとえば、コーヒースクリプトの依存関係を追加したいとします。npmを使用して依存関係をインストールし、package.jsonファイルに保存します。

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

独自のモジュール 'bloomfilters'を含めたいと思っていて、それがnpmレジストリになかったとします。次の方法でプロジェクトに追加できます。

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

ローカルモジュール

独自のコーヒーやJavaScriptを含めたい場合は、それらのファイルをapp /フォルダーに追加することで実行できます。'require'メソッドを介してスクリプトを公開するには、それをCommonJSモジュールにする必要があることに注意してください。非常にシンプルです- ヘムのドキュメントを参照してください。

ローカルファイル

CommonJS以外の「require」コードを含めたい場合は、slug.jsonの「libs」リストを介してカスタムjavascriptまたはcoffeescriptを参照することで、コードをステッチすることもできます。

CSS

必要に応じて、裾もCSSをつなぎ合わせます。ヘムのドキュメントを参照してください。

建物

依存関係がリストされたら、ヘムを使用してそれらをすべて組み合わせることができます。

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

ノート

Hemはspinejsプロジェクト用ですが、そのために使用する必要はありません。脊椎について言及しているドキュメントは無視してください...

まあ、私はまだ誰もBrowserifyについて言及していないことに驚いています。

1. package.json形式をサポート
2. github（または任意のgit）リポジトリをパッケージソースとして使用できる下のnpmを使用します
3. すべての依存関係を1つのファイルに縮小して連結します。
4. 依存関係に含めた場合、coffeescriptをサポートします
5. ずっとスタイルが必要です。
6. ソースマップをサポート

Hemがあなたの要件を満たしていると確信しています（私は追加のコンパイラー（jadeとスタイラス）で個人のフォークを使用しています-ニーズに合わせて簡単にカスタマイズできます）。npmを使用して依存関係を管理します。

あなたは見てとることをお勧めしますヨーマン要件のお手伝いをするためにいくつかの技術を使用しています、。

私たちのワークフローは、ウェブアプリを構築する際の生産性と満足度を向上させる3つのツールで構成されています：yo（足場ツール）、grunt（ビルドツール）、bower（パッケージ管理用）。

CoffeeScript、Compassなどの組み込みサポート。r.js（RequireJS）、単体テストなどで動作します。

あなたの要件については：

1. Bowerは依存関係管理に使用されます
2. Bowerはgit：//、http：//などのローカルファイルで作業できます
3. 縮小化と連結の組み込みサポート（画像の場合でも）
4. CoffeeScriptとCompassを自動的にコンパイルするための組み込みサポート（LiveReloadを使用）
5. ビルドプロセスで述べたように：AMDを使用している場合は、それらのモジュールをr.jsに渡します。そうする必要はありません。

すべての機能：

超高速の足場 —カスタマイズ可能なテンプレート（HTML5ボイラープレート、Twitterブートストラップなど）、RequireJSなどを使用して、新しいプロジェクトを簡単に足場できます。

優れたビルドプロセス —縮小化と連結ができるだけでなく、また、すべての画像ファイル、HTMLを最適化し、CoffeeScriptファイルとCompassファイルをコンパイルします。AMDを使用している場合は、これらのモジュールをr.jsで渡すので、必要はありません。

CoffeeScriptとCompassの自動コンパイル — LiveReload監視プロセスはソースファイルを自動的にコンパイルし、変更が加えられるたびにブラウザーを更新するため、変更する必要はありません。

スクリプトを自動的にlintする —すべてのスクリプトはJSHintに対して自動的に実行され、言語のベストプラクティスに従っていることを確認します。

組み込みのプレビューサーバー —独自のHTTPサーバーを起動する必要はもうありません。私の組み込みのものはたった1つのコマンドで起動できます。

素晴らしい画像の最適化 — OptiPNGとJPEGTranを使用してすべての画像を最適化します。これにより、ユーザーはアセットのダウンロードにかかる時間を減らし、アプリを使用する時間を増やすことができます。

キラーパッケージ管理 —依存関係が必要ですか？それはただのキーストロークです。コマンドライン（たとえば `bower search jquery）を使用して新しいパッケージを簡単に検索し、ブラウザーを開かなくても、パッケージをインストールして最新の状態に保つことができます。

PhantomJSユニットテスト — PhantomJSを使用して、ヘッドレスWebKitでユニットテストを簡単に実行できます。新しいアプリケーションを作成するときに、アプリのテストの足場も含めます。

Bowerは、（1）と（2）必要な残りの部分のニーズに合う場合があります。Readmeから：

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

パッケージをインストールするには：

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

Jamパッケージマネージャをご覧ください。以下はそのホームページからの説明です

保守可能な資産を切望するフロントエンド開発者にとって、JamはJavaScriptのパッケージマネージャーです。他のリポジトリとは異なり、ブラウザを最初に配置します。

動作は、npmによく似ています。

以下のようなパッケージをインストールします

jam install backbone

実行してパッケージを最新に保つ

jam upgrade
jam upgrade {package} 

生産用にパッケージを最適化

jam compile compiled.min.js

Jamの依存関係をpackage.jsonファイルに追加できます。

完全なドキュメントについては、Jamドキュメントをお読みください

私はちょうどinject.jsに出会いました

プロジェクトサイトの機能の一部：

Inject（Apache Software License 2.0）は、ライブラリに依存しない方法で依存関係を管理する革新的な方法です。主な機能は次のとおりです。

• ブラウザでのCommonJSコンプライアンス（exports。*）
• CommonJSサポートマトリックスの全文を見る
• ファイルのクロスドメイン検索（easyXDM経由）
• localStorage（モジュールを1回ロードする）

いくつかのオプションがあります：

• モジュールをインポートできるhttp://browserify.org/
• RequireJSは同じ問題に対処します
• 活発に開発されているように見えるのは、JoinJSです。

コンポーネントも興味深いかもしれませんが、それ自体は依存関係を管理しませんが、大規模なライブラリを細かく切り分けたバージョンを使用できます。

私はnpmでヘムを使用しており、これまでカバーしていないと思われるいくつかの追加の利点を追加したいと思いました。

• Hemには自己完結型のWebサーバー（階層）があるため、再コンパイルする必要なくコードを開発できます。私は決して使用しませんhem buildアプリを公開していない限り、私は。
• Spine.jsを使用してヘムを使用する必要はありません。slug.jsonを正しく設定すれば、Spine.jsを使用して任意のcoffeescriptパッケージをコンパイルできます。これがcakefileで自動コンパイルされた私のパッケージの1つです：https：//github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• 上記について言えば、hemを使用すると、ローカルシステムの他の依存関係をnpmリンクでリンクし、strataサーバーを使用している場合でもそれらをシームレスに組み合わせることができます。実際には、あなたも使用する必要はありませんcake上記方法を。依存するプロジェクトからcoffeescriptに直接リンクすることができます。
• Hemはeco、ビューの埋め込み（Coffeescriptの埋め込み）とCSSのスタイラスをサポートし、Coffeescriptとともにすべてを1つのJSと1つのCSSファイルにコンパイルします。

Spine、hem、coffeescriptアプリをセットアップするための基本的なリストを以下に示します。Spineパーツは無視してかまいません。実際、spine appSpine以外のアプリのディレクトリ構造を設定してslug.jsonから、編集して別のコンパイル構造に変更することもあります。

1. curl http://npmjs.org/install.sh | sh* nixシステムにNPMをインストールします。コマンドラインから利用できると仮定します。
2. 裾をグローバルにインストールします（npm install -g hem）。開発は最近分岐しているので、github（https://github.com/spine/hem）から直接取得し、分岐をチェックアウトし、npm install -g .そのフォルダーに入れることをお勧めします。
3. npm install -g spine.app スパインをグローバルコマンドとして使用できるようにします
4. spine app folderで呼び出されるSpineプロジェクトが作成さappれfolder、適切なディレクトリ構造と一連のスケルトンファイルが生成されます。
5. cdフォルダに入れて、dependencies.json必要なライブラリを編集します。それらを追加してslug.json、裾がそれらを見つける場所もわかるようにします。
6. オプション：npm link開発中の任意のローカルパッケージをにnode_modules追加し、それらをslug.jsonヘムに追加できます（index.js直接インクルードするか、index.coffeeヘムにコンパイルする場合は）。
7. npm install . 入力したすべての依存関係をダウンロードします。

8. デフォルトのスパイン構成を見ると、依存関係から必要なすべてのライブラリーがあるapp/lib/setup.coffee場所requireがあります。例：

   # Spine.app had these as dependencies by default
   require('json2ify')
   require('es5-shimify')
   require('jqueryify')
   
   require('spine')
   require('spine/lib/local')
   require('spine/lib/ajax')
   require('spine/lib/manager')
   require('spine/lib/route')
   
   # d3 was installed via dependencies.json
   require 'd3/d3.v2'

9. ではindex.coffee、require lib/setupアプリのメインコントローラーをロードします。さらに、requireこれらの他のコントローラーの他のクラスも必要です。spine controller somethingまたはspine model somethingを使用して、コントローラーとモデルのテンプレートを生成できます。典型的なSpineコントローラーはnode'sを使用して次のようになりますrequire。

   Spine = require('spine')
   # Require other controllers
   Payment = require('controllers/payment')
   
   class Header extends Spine.Controller
     constructor: ->
       # initialize the class
   
     active: ->
       super
       @render()
   
     render: ->
       # Pull down some eco files
       @html require('views/header')   
   
   # Makes this visible to other controllers    
   module.exports = Header

10. 生成index.htmlされたデフォルトは通常、アプリのロードには問題ありませんが、必要に応じて変更します。あなたの要件ごとに、それは一つだけで引くjsと1 css変更する必要はありませんファイル、。

11. 必要に応じて、cssフォルダー内のスタイラスファイルを編集します。CSSよりもはるかに柔軟です:)
12. からfolder、を実行hem serverしてヘムサーバーを起動し、に移動しlocalhost:9294てアプリを表示します。（ヘムをグローバルにインストールした場合）いくつかの隠された引数があります。たとえば、--host 0.0.0.0、すべてのポートでリッスンがあります。
13. 適切なMVCテクニックを使用してアプリの残りの部分を構築し、CSSにはスタイラスを使用し、ビューにはecoを使用します。または、Spineをまったく使用しないでください。裾は、Coffeescriptとnpmでうまく機能します。両方のモデルを使用したプロジェクトの多くの例があります。

もう1つ：通常は、hem serverコードを更新してファイルを保存すると自動的に更新されるため、デバッグが簡単になります。実行中のhem build2つのファイルにアプリケーションをコンパイルしますapplication.js縮小され、application.css。hem serverこの後に実行すると、それらのファイルが使用され、自動的に更新されなくなります。そのhem buildため、実際にデプロイするアプリの縮小版が必要になるまでは行わないでください。

その他の参考資料：Spine.jsとヘムの使用開始

これは非常に異なるアプローチを取るソリューションです。すべてのモジュールをJSONオブジェクトにパッケージ化し、追加のリクエストなしでファイルコンテンツを読み取って実行することによりモジュールを必要とします。

純粋なクライアントサイドのデモ実装：http ://strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / requireは、実行時に利用可能なJSONパッケージがあるかどうかに依存します。require関数は、そのパッケージのために生成されます。パッケージには、アプリに必要なすべてのファイルが含まれています。パッケージにはすべての依存関係がバンドルされているため、これ以上のhttp要求は行われません。これは、クライアントで必要なNode.jsスタイルに到達できる限り近くなります。

パッケージの構造は次のとおりです。

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

ノードとは異なり、パッケージは外部名であることを認識していません。名前を付けるには、依存関係を含めてパッケージ次第です。これは完全なカプセル化を提供します。

ここでのすべての設定を考えると、パッケージ内からファイルをロードする関数があります。

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

この外部コンテキストは、モジュールがアクセスできるいくつかの変数を提供します。

require彼らは他のモジュールが必要な場合がありますので、機能をモジュールにさらされています。

グローバルオブジェクトへの参照や一部のメタデータなどの追加のプロパティも公開されます。

最後に、モジュールと指定されたコンテキスト内でプログラムを実行します。

この回答は、ブラウザーで同期node.jsスタイルのrequireステートメントが必要で、リモートスクリプトロードソリューションに関心がないユーザーに最も役立ちます。

バックエンドでnode / expressを使用している場合は、carteroを確認してください。

ほとんどの要件を満たしていると思われるdojoツールキットをチェックすることをお勧めします。よくわからないのはCoffeeScriptです。

dojoは、非同期モジュール定義（AMD）形式で記述されたモジュールで機能します。パッケージ付きのビルドシステムがあり、それらを1つまたは複数のファイル（レイヤーと呼ばれる）に集約できます。どうやらそれはgitタイプのリポジトリを受け入れます、ビルドシステムの詳細はこちら：

http://dojotoolkit.org/documentation/tutorials/1.8/build/

記録として、v1.9ベータ版は来月リリースされる予定です。

最近リリースされたすべての基準を満たす別のフレームワーク：http : //duojs.org/（CSSなどの他のリソースを依存関係として扱うこともサポートしています）。

非同期読み込みと依存関係の注入+ browserifyは、requirejsと比較して、もう1つの良い選択です。

非同期フロントエンド依存性管理（AMDなし）