web-dev-qa-db-ja.com

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

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

  1. Npmの package.json または bower のbower.jsonに似た形式でクライアント側の依存関係を管理します
  2. あまり知られていないライブラリのdependency.jsonファイルでgitリポジトリまたは実際のjsファイル（Webまたはローカル）を指す柔軟性が必要です（npmではgitリポジトリを指定できます）
  3. すべてのライブラリを ender のような単一のファイルに縮小して名前空間にする必要があります。これは、クライアント側で<script>タグに配置する必要がある唯一のjsファイルです。
  4. BoxJSのようなCoffeeScriptをすぐにサポートする必要があります 4 （現在は無効）

  5. ブラウザでは、 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つの要件をすべて満たす単一のツールを提供する回答、または私の要件をすべて満たす複数のそのようなツールのツールチェーンの具体的なワークフロー/スクリプト/作業例を投稿する場合にのみ回答を受け入れます。ありがとうございました。

javascriptnpmcoffeescriptdependency-management
94
pathikrit

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

0
pathikrit

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 [〜＃〜]

41
Jean-Philippe Leclerc

http://requirejs.org/ はあなたが探しているものです

24
Chandra Sekhar Walajapet

@ 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

必要に応じて、裾も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 プロジェクト用でしたが、そのために使用する必要はありません。必要に応じて脊椎に言及しているドキュメントは無視してください...

15
dsummersl

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

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

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

9
Guillaume86

Yeomanをご覧ください。いくつかのテクニックを使用して要件をサポートします。 。

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

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

要件に関して：

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

すべての機能：

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で単体テストを簡単に実行できます。新しいアプリケーションを作成するときに、アプリケーションのテスト用の足場も含めます。

5
MarcoK

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
4
Oualid Jabnoune

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

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

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

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

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

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

動作方法はnpmとよく似ています。

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

jam install backbone

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

jam upgrade
jam upgrade {package}

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

jam compile compiled.min.js

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

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

2
himanshu

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

1
Brave Dave

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

1
Daniel X Moore

私はヘムをnpmで使用していますが、これまでカバーされていなかったと思われる追加の利点を追加したいと考えました。

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

以下に、Spine、Hem、CoffeeScriptアプリをセットアップするための基本的なリストを示します。背骨の部分は無視してください。実際、spine appを使用して非Spineアプリのディレクトリ構造を設定し、slug.jsonを編集して別のコンパイル構造に変更することがあります。

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

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

  9. 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

  10. デフォルトで生成されるindex.htmlは通常、アプリの読み込みには適していますが、必要に応じて変更します。要件ごとに、1つのjsファイルと1つのcssファイルのみをプルします。これらのファイルは変更する必要はありません。

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

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

その他の参照： Spine.js＆hemはじめに

1
Andrew Mao

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

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

Component も興味深い場合があります。依存関係自体は管理しませんが、他の点では大きなライブラリの切り刻まれたバージョンを使用できます。

1
JoelKuiper

requirejsと比較して、非同期読み込みとbrowserifyを使用した依存性注入も適切な選択肢です

AMDを使用しない非同期フロントエンド依存性管理

0
fantasyni

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

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

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

記録として、来月にはv1.9ベータが予定されています。

0
Christophe