サーバー側の依存関係を管理するための優れたソリューションはありますが、一貫したクライアント側のJavaScript依存関係管理ワークフローを持つためのすべてのニーズを満たすものは見つかりませんでした。次の5つの要件を満たしたい:
bower.json
に似た形式でクライアント側の依存関係を管理しますdependency.json
ファイルでgitリポジトリまたは実際のjsファイル(Webまたはローカル)を指す柔軟性が必要です(npmではgitリポジトリを指定できます)<script>
タグに配置する必要がある唯一のjsファイルです。ブラウザでは、 require スタイルのいずれかを使用できるはずです。
var $ = require('jquery');
var _ = require('underscore');
または、さらに良いのは、 headjs style:
head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
// executed when all libraries are loaded
});
そのような単一のツールが存在しない場合、ツールの最良の組み合わせ、つまり volo (または grunt )のようなものを使用して組み合わせることができるツールチェーンは何ですか?
私はここでリンクしたすべてのツールをすでに調査しましたが、それらは個々にせいぜい3つの要件のみを満たします。したがって、これらのツールについて再度投稿しないでください。私の5つの要件をすべて満たす単一のツールを提供する回答、または私の要件をすべて満たす複数のそのようなツールのツールチェーンの具体的なワークフロー/スクリプト/作業例を投稿する場合にのみ回答を受け入れます。ありがとうございました。
最近リリースされた私の基準をすべて満たす別のフレームワーク: http://duojs.org/ (およびCSSなどの他のリソースを依存関係として扱うこともサポートしています)。
require.js は必要なすべてを行います。
this質問に対する私の答えはあなたを助けるかもしれません
例:
クライアントアプリプロジェクトの階層:
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ファイルをコンパイルします。
Prodに移動するとき、プロジェクト全体を 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を指しましょう)。 [〜#〜] yes [〜#〜]
すべてのライブラリをenderのような単一のファイルに縮小し、名前空間にする必要があります。これは、クライアント側でスクリプトタグに入れる必要がある唯一のjsファイルです。 [〜#〜] yes [〜#〜]r.jsで。
Boxのようなcoffeescriptをそのままサポートする必要があります。 [〜#〜] yes [〜#〜]
ブラウザーでは、require styleまたはheadjsを使用できます。 [〜#〜] yes [〜#〜]
http://requirejs.org/ はあなたが探しているものです
@ Guillaume86のように、裾はあなたがなりたい場所に最も近づくと思います。
ヘムでは、npmとヘムの組み合わせを使用して依存関係を管理します。 npmを使用して、すべてのプロジェクトの外部依存関係を明示的にインストールします。 hemを使用して、クライアント側の操作のためにどの依存関係(外部とローカルの両方)をつなぎ合わせるかを指定します。
これのスケルトンプロジェクトを作成したので、これがどのように機能するかを確認できます- https://github.com/dsummersl/clientsidehem で確認できます
Npmを使用して特定の依存関係を検索し、package.jsonファイルを変更して、今後依存関係が追跡されるようにします。次に、slug.jsonでアプリケーションの依存関係を指定します。
たとえば、coffee-script依存関係を追加するとします。 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モジュールにする必要があることに注意してください。それは非常に簡単です- hem docs を参照してください。
非CommonJSの非 'require'コードを含める場合は、slug.jsonの 'libs'リストを介してカスタムjavascriptまたはcoffeescriptを参照することにより、それをステッチすることもできます。
必要に応じて、裾もCSSをつなぎ合わせます。 hem docs を参照してください。
依存関係を一覧表示したら、ヘムを使用してそれらをまとめてステッチできます。
# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js
ヘムは spinejs プロジェクト用でしたが、そのために使用する必要はありません。必要に応じて脊椎に言及しているドキュメントは無視してください...
さて、誰も言及していないことに驚いています Browserify .
Hem 要件を満たしていると確信しています(追加のコンパイラ-ジェイドとスタイラスを備えたパーソナルフォークを使用しています-ニーズに合わせて簡単にカスタマイズできます)。 npmを使用して依存関係を管理します。
Yeomanをご覧ください。いくつかのテクニックを使用して要件をサポートします。 。
私たちのワークフローは、Webアプリを構築する際の生産性と満足度を向上させる3つのツールで構成されています: yo (scaffoldingツール)、 grunt (ビルドツール)および bower (パッケージ管理用)。
CoffeeScript、Compassなどの組み込みサポート。 r.js( RequireJS )、ユニットテストなどで動作します。
要件に関して:
すべての機能:
Lightning-fast scaffolding—カスタマイズ可能なテンプレート(HTML5ボイラープレート、Twitter Bootstrapなど)、RequireJSなどで新しいプロジェクトを簡単にスキャフォールディングします。
優れたビルドプロセス—縮小と連結を取得できるだけでなく、また、すべての画像ファイル(HTML)を最適化し、CoffeeScriptファイルとCompassファイルをコンパイルします。AMDを使用している場合は、r.jsを介してこれらのモジュールを渡すため、必要はありません。
CoffeeScriptとCompassを自動的にコンパイルします— LiveReloadウォッチプロセスはソースファイルを自動的にコンパイルし、変更が行われるたびにブラウザを更新します。
スクリプトを自動的にリントします—すべてのスクリプトはJSHintに対して自動的に実行され、言語のベストプラクティスに従っています。
組み込みのプレビューサーバー—独自のHTTPサーバーを起動する必要はもうありません。組み込みのコマンドは、1つのコマンドで起動できます。
Awesome Image Optimization— OptiPNGとJPEGTranを使用してすべての画像を最適化し、ユーザーがアセットをダウンロードする時間を短縮し、アプリを使用する時間を長くできるようにします。
キラーパッケージ管理—依存関係が必要ですか?キーを押すだけです。コマンドラインを介して新しいパッケージを簡単に検索できるようにし(例: `bower search jquery)、それらをインストールし、ブラウザを開かずに最新の状態に保ちます。
PhantomJS単体テスト— PhantomJSを使用して、ヘッドレスWebKitで単体テストを簡単に実行できます。新しいアプリケーションを作成するときに、アプリケーションのテスト用の足場も含めます。
Bower は、requirejsを持っている残りの部分の(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
ファイルに追加できます。
完全なドキュメントについては、 ジャムドキュメント を参照してください。
バックエンドでnode/expressを使用している場合は、 cartero を確認してください。
これは非常に異なるアプローチをとるソリューションです。すべてのモジュールを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>
Nodeとは異なり、パッケージはその外部名を認識しません。名前を付けるための依存関係を含むパッケージ次第です。これにより完全なカプセル化が提供されます。
これらすべてのセットアップを考えると、パッケージ内からファイルをロードする関数があります:
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ステートメントを使用したいと考えており、リモートスクリプトの読み込みソリューションに興味がない場合に最も役立ちます。
私はヘムをnpmで使用していますが、これまでカバーされていなかったと思われる追加の利点を追加したいと考えました。
hem build
は使用しません。cake
メソッドを使用する必要さえありません。依存プロジェクトからcoffeescriptに直接リンクできます。eco
(埋め込みCoffeescript)とCSSのスタイラスをサポートし、Coffeescriptとともにこれらすべてを1つのJSファイルと1つのCSSファイルにコンパイルします。以下に、Spine、Hem、CoffeeScriptアプリをセットアップするための基本的なリストを示します。背骨の部分は無視してください。実際、spine app
を使用して非Spineアプリのディレクトリ構造を設定し、slug.json
を編集して別のコンパイル構造に変更することがあります。
curl http://npmjs.org/install.sh | sh
を* nixシステムに。コマンドラインから利用できると仮定します。npm install -g hem
)。開発は最近分岐しているので、github( https://github.com/spine/hem )から直接取得し、ブランチをチェックアウトし、その中のnpm install -g .
フォルダ。npm install -g spine.app
は、脊椎をグローバルコマンドとして使用可能にしますspine app folder
は、app
にfolder
というSpineプロジェクトを作成し、適切なディレクトリ構造と多数のスケルトンファイルを生成して開始します。cd
フォルダーに移動し、必要なライブラリーのdependencies.json
を編集します。それらをslug.json
に追加して、それらがどこにあるのかをヘムが認識できるようにします。npm link
開発中の任意のローカルパッケージをnode_modules
に追加し、それらをslug.json
に追加して、裾に(index.js
を直接含めるか、index.coffee
hemをコンパイルしたい場合)npm install .
は、入力したばかりのすべての依存関係をダウンロードします。デフォルトのスパイン設定を見ると、依存関係から必要なすべてのライブラリをrequire
するapp/lib/setup.coffee
があります。例:
# 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'
index.coffee
では、require lib/setup
だけで、アプリのメインコントローラーを読み込みます。さらに、これらの他のコントローラー内の他のクラスをrequire
する必要があります。 spine controller something
またはspine model something
を使用して、コントローラーとモデルのテンプレートを生成できます。典型的なSpineコントローラーは、ノードの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
デフォルトで生成されるindex.html
は通常、アプリの読み込みには適していますが、必要に応じて変更します。要件ごとに、1つのjs
ファイルと1つのcss
ファイルのみをプルします。これらのファイルは変更する必要はありません。
css
フォルダーで必要に応じてスタイラスファイルを編集します。 CSSよりもはるかに柔軟です:)folder
からhem server
を実行してヘムサーバーを起動し、localhost:9294
に移動してアプリを表示します。 (hemをグローバルにインストールした場合。)いくつかの隠された引数があります。たとえば、--Host 0.0.0.0
はすべてのポートでリッスンします。もう1つ:通常、hem server
は、コードを更新してファイルを保存すると自動的に更新されるため、デバッグが簡単になります。 hem build
を実行すると、アプリが2つのファイルにコンパイルされます。application.js
は縮小され、application.css
です。この後にhem server
を実行すると、それらのファイルが使用され、自動的に更新されなくなります。したがって、展開のためにアプリの縮小バージョンが実際に必要になるまで、hem build
を使用しないでください。
その他の参照: Spine.js&hemはじめに
いくつかのオプションがあります。
Component も興味深い場合があります。依存関係自体は管理しませんが、他の点では大きなライブラリの切り刻まれたバージョンを使用できます。
requirejsと比較して、非同期読み込みとbrowserifyを使用した依存性注入も適切な選択肢です
dojoツールキット をチェックアウトすることをお勧めします。これは、ほとんどの要件を満たしているようです。よくわからないのはCoffeeScriptです。
dojoは、非同期モジュール定義(AMD)形式で記述されたモジュールで動作します。パッケージを含むビルドシステムがあり、1つまたは複数のファイル(レイヤーと呼ばれる)にそれらを集約できます。どうやらgitタイプのリポジトリを受け入れているようです。ビルドシステムの詳細はこちら:
http://dojotoolkit.org/documentation/tutorials/1.8/build/
記録として、来月にはv1.9ベータが予定されています。