javascript - クライアント側の JavaScript の依存関係を管理する方法は?

Question

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

クライアント側の依存関係を npm のpackage.jsonやbowerのような形式で管理しますbower.json
あまり知られていないライブラリのファイルで、git リポジトリまたは実際の js ファイル (Web またはローカルのいずれか) を指す柔軟性が必要ですdependency.json(npm を使用すると、git リポジトリを指すことができます)。
すべてのライブラリを ender のような 1 つのファイルに縮小して名前空間を<script>付ける必要があります。これは、クライアント側のタグに入れる必要がある唯一の js ファイルです。
BoxJS 4のような CoffeeScript をすぐにサポートする必要があります(現在は廃止されています) 。

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

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

またはさらに良いことに、headjsスタイルを実行します。

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

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

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

score 45 · Accepted Answer

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 ファイルをコンパイルします。

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

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

要件は次のとおりです。

クライアント側の依存関係を npm の package.json または bower の component.json に似た形式で管理します。違いますが、同じくらい良いです！
あまり知られていないライブラリの依存関係.jsonファイルで、gitリポジトリまたは実際のjsファイル（Web上またはローカルのいずれか）を指す柔軟性が必要です（npmでgitリポジトリを指すようにしましょう）。はい
すべてのライブラリを縮小して、ender のような単一のファイルに名前空間を付ける必要があります。これは、クライアント側の script-tag に入れる必要がある唯一の js ファイルです。はい、r.jsで。
Box のような coffeescript をすぐにサポートする必要があります。はい
ブラウザーでは、require style または headjs のいずれかを使用できます。はい

score 24 · Accepted Answer

24

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

于 2012-10-15T09:52:21.513 に答える

score 15 · Accepted Answer

@Guillaume86として、私は裾があなたがなりたい場所に最も近づくと思います.

Hem の依存関係は、npm と hem の組み合わせを使用して管理されます。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

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

建物

依存関係を一覧表示したら、hem を使用してそれらをすべてつなぎ合わせることができます。

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

ノート

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

score 11 · Accepted Answer

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

package.json 形式をサポート
github（または任意のgit）リポジトリをパッケージソースとして使用できるnpmを使用します
すべての依存関係を単一のファイルに縮小および連結します。
依存関係に含まれている場合、coffeescript をサポートします
どこまでもスタイルが必要。
ソースマップをサポート

score 9 · Accepted Answer

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

score 5 · Accepted Answer

Yeomanを参照してください。これは、いくつかの手法を使用して要件を満たすのに役立ちます。

私たちのワークフローは、web アプリを構築する際の生産性と満足度を向上させるための 3 つのツールで構成されています: yo (足場ツール)、grunt (ビルドツール)、およびbower (パッケージ管理用)。

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

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

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

すべての機能:

超高速のスキャフォールディング— カスタマイズ可能なテンプレート (HTML5 Boilerplate、Twitter Bootstrap など)、RequireJS などを使用して、新しいプロジェクトを簡単にスキャフォールディングします。

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

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

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

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

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

キラーパッケージ管理— 依存関係が必要ですか? キーストロークだけです。コマンドライン (`bower search jquery など) を介して新しいパッケージを簡単に検索し、インストールして、ブラウザーを開かなくても最新の状態に保つことができます。

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

score 4 · Accepted Answer

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

score 2 · Accepted Answer

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

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

動作方法はnpmによく似ているようです。

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

jam install backbone

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

jam upgrade
jam upgrade {package}

本番用にパッケージを最適化する

jam compile compiled.min.js

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

完全なドキュメントについては、Jam のドキュメントを参照してください。

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

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

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

デフォルトのスパイン構成を見ると、依存関係から必要なすべてのライブラリが存在する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'

では、アプリのメインコントローラをロードindex.coffeeするだけです。さらに、それらの他のコントローラーの他のクラスもrequire lib/setup必要です。またはをrequire使用して、コントローラーとモデルのテンプレートを生成できます。ノードのを使用すると、典型的な Spine コントローラは次のようになります。spine controller somethingspine model somethingrequire
```
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は通常、アプリの読み込みには問題ありませんが、必要に応じて変更してください。要件に応じて、変更する必要のないjs1 つのファイルのみが取り込まれます。css
フォルダ内のスタイラスファイルを必要に応じて編集しcssます。CSSよりもはるかに柔軟です:)
からfolderを実行hem serverして hem サーバーを起動し、に移動しlocalhost:9294てアプリを表示します。(hem をグローバルにインストールした場合。) 隠し引数がいくつかあります。たとえば--host 0.0.0.0、すべてのポートでリッスンします。
適切な MVC 手法を使用してアプリの残りの部分を構築し、CSS にはスタイラスを使用し、ビューには eco を使用します。または、Spine をまったく使用しなくても、hem は Coffeescript と npm でうまく機能します。両方のモデルを使用したプロジェクトの例は多数あります。

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

追加の参考資料: Spine.js と hem の開始

score 1 · Accepted Answer

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

score 1 · Accepted Answer

これは非常に異なるアプローチを取るソリューションです。すべてのモジュールを 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 ステートメントを使用したいが、リモートスクリプトの読み込みソリューションには関心がない場合に最も役立ちます。

score 0 · Accepted Answer

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

dojo は、Asynchronous Module Definition (AMD) 形式で記述されたモジュールで動作します。パッケージを含むビルドシステムがあり、それらを 1 つまたは複数のファイル (レイヤーと呼ばれます) に集約できます。どうやら git タイプのリポジトリを受け入れるようです。ビルドシステムの詳細については、こちらをご覧ください。

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

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

score 0 · Accepted Answer

非同期読み込み + browserify による依存性注入は、requirejs と比較して、別の良い選択になります

AMDなしの非同期フロントエンド依存関係管理

score 0 · Accepted Answer

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

javascript - クライアント側の JavaScript の依存関係を管理する方法は?

16 に答える 16

依存関係の追加

ローカル モジュール

ローカル ファイル

CSS

建物

ノート

Related

Reference

ローカルモジュール

ローカルファイル