Bower in RailsアプリケーションでJavascriptの依存関係を管理するにはどうすればいいですか？

Question

RailsアプリケーションでJavascriptの依存関係が拡大しているため、いくつかの問題が発生しています。 1つは、非常に多くの場合、異なるJavascriptライブラリのバージョンを追跡して更新することが困難になります。最初はturning them into gemsを試しましたが、それらを管理する必要があります。いくつかはすでに宝石（バックボーンレールのようなもの）ですが、一貫したパッケージマネージャーを持っていたいと思います。

だから私はBower「ウェブのパッケージマネージャー」を調べています。いくつかのブログ投稿from kaeffとfrom af83が役に立ちましたが、私はまだ問題にぶつかっています。この質問が、人々が自分のプロジェクトに最適なソリューションを見つけるために使用できるさまざまな回答につながることを願っています。

私は特にHerokuの導入でBowerを通じて資産を管理するためのアドバイスを見たいと思います。

Answer 1

あなたのapplication.jsがBowerによって定義されたパッケージを要求できるようにする方法の1つは、Sprocketsのバージョンを使用しています。この機能はSprockets 2.6に追加されました.Rails 3.xではdue to a version restrictionをバンドルできません。その機能を利用するには、gem "sprockets", "2.2.2.backport1"を同梱できます。

スクロケットがアセットを探し始めるのはvendor/assets/componentsです。 BowerパッケージにはJavascriptだけでなくCSSやイメージアセットも含まれる可能性があるため、パスはベンダー/コンポーネントです。パッケージを必要とするときにJavascriptをどのようにインクルードするかは、mainプロパティのbower.jsonファイルを参照することで確認できます。このファイルには、パイプラインに含めるファイルが記載されています。ここでは、多くのBowerパッケージがこのプロパティを提供していないか、またはRequireJSが利用可能であると主なソースを提供していないということです（例：d3）。どのソースメインがbower list --mapで定義されているかを見ることができます。

mainがあなたに合っていない場合、単にBowerを使用して、パッケージではなく1つのリモートJSファイルを管理することができます。ジョシュ・ピークはa gist that demonstrates thisです。

$ npm install -g bower 
$ mkdir -p vendor/assets 
$ cd vendor/assets/ 
$ curl https://raw.github.com/gist/3667224/component.json > bower.json 
$ bower install 

bower.json特にその負荷のjQuery：バウアーの最新バージョンはbower.json代わりのcomponent.jsonので、私は更新した手順を期待しています。その後、あなたのapplication.jsには//= require jqueryとスプロケットがあなたのvendor/assets/componentsで見つけることができます。新しい依存関係を追加するには、ちょうどあなたのbower.jsonにそれらを含めると、例えば、再bower installを実行します。

{ 
    "dependencies": { 
    "jquery": "http://code.jquery.com/jquery-1.8.1.js", 
    "d3": "http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.js" 
    } 
} 

あなたは1つのコンフィギュレーションファイルに設定libとvendor資産を管理したい場合は、あなたがbower-railsを使用することができますが、多くはありませんlibを使用してください。その宝石はまたいくつかのレーキタスクを提供しますが、彼らは基本的なバワーコマンドよりも何もしません。

私の知る限り、資産のコンパイル中にBowerを必要に応じてインストールする方法はありません。したがって、Herokuのようなデプロイ環境を使用している場合は、vendor/assets/componentsディレクトリをコミットしてbowerコマンドで更新する必要があります。

application.jsに1つのディレクティブでBower依存関係を設定する必要がある場合は、いいと思います。 gist from kaeffは、require_bower_dependenciesディレクティブを作成する方法を示しています。あなたのためにこれを行う宝石はまだありません。これまでは、それぞれの依存関係をbower.jsonとapplication.jsの両方で宣言する必要があります。

Answer 2

Rails + Bower + Herokuについては、a guideと書いてあります。希望が役立ちます。

Answer 3

他の誰かがあなたのレールプロジェクトでバワーを使うといいと思う場合は、もう一度考えてみてください。

バウアーパッケージは、単にレールまたはスプロケットと一体化されていません。

これが何を意味するのか：

• を、彼らは通常、ディレクティブを必要とスプロケットを経由してあなたのjavascriptを含むため、マニフェストindex.jsを指定しません。
• バウアーパッケージを分析して回避する必要があり、必要なものと必要なものを正確に処理する必要があります。
• バワーパッケージはメインキーを一様に指定しておらず、現在のスプロケット/ベアサポートでも無視されているようです
• フォント、画像、テンプレートなどの追加資産は、プロダクション資産のコンパイルに含まれません（Rails 4にはapp/assets/xxxのみが含まれます）
• config.assets.precompileパターンを使用して問題を回避しようとすると、粗いグレインが発生し、bowerコンポーネントのディレクトリにたくさんの塊を拾います。
• bowerパッケージはsprocket URLパスヘルパーを使用しないので、CSS/SCCS内のイメージやフォントへの参照には正しいアセットパスがありません。それで幸運。
• はあなたが
• bundle installはもはやあなたのプロジェクトの依存関係のために働く亭のパッケージを使用するすべてのプロジェクトでの問題のすべてを解決する必要があります、あなたは対照的資産では別のパッケージマネージャだけでなく

を使用する必要があります宝石は簡単に作成でき、アセットをプロジェクトに引き込むための統一された抽象化を提供します。元のファイルを修正し、アセットヘルパーを使用することで、あなたのレールプロジェクトでうまくいくでしょう。アセット・ジェムの作成にはまったくのblogがあります。また、宝石の作成に関する一般的なrailscastもあります。

IMOレール・アセット・パイプラインにプラグインしないように設計されたバワー・パッケージの問題を処理するすべてのプロジェクトよりも、アセット・ジェムを最新の状態に保つ方が良いでしょう。

Answer 4

チェックアウトRails Assetsプロジェクト。使用例：Railsの-資産プロジェクトの

source 'http://rubygems.org' 
source 'https://rails-assets.org' 

# gem 'rails-assets-BOWER_PACKAGE_NAME' 
gem 'rails-assets-jquery', '~> 1.10.2' 
gem 'rails-assets-sly', '~> 1.1.0' 
gem 'rails-assets-raphael', '~> 2.1.0' 

UPD（2016年1月26日）
今後は議論の上にあります。 the threadをチェックして、あなた自身の決定を下してください：それを使用するか、回避策を見つけてください。

Answer 5

私はこの問題をここ数日間解決しており、次のプロセスを解決しました。

bower-rails gemを使用してください。これは、バウアーの使用をレールアプリケーションとアセットパイプラインに統合するのに役立つ数多くのすばらしいレーキタスクを提供します。私は、bower-railsが提供するルビーベースのDSLの代わりにbower.jsonの設定に固執することを好みます。私はベンダー/資産/ bower_componentsに資産を格納するデフォルトのバワー・ロケーションを使用します。 application.rbに以下を追加してください。

config.assets.paths << Rails.root.join("vendor","assets","bower_components") 

あなたbower.jsonに追加のパッケージを持っていたら、あなたは以下を実行します。

rake bower:install 

JavaScriptのパッケージをインストールします。次に、application.jsファイルとapplication.cssファイルでjavacriptを参照します。

上記の@ andrew-hackingは、CSSと画像を持つjavascriptパッケージ、特に画像を参照するCSSでうまくいきません。

rake bower:resolve 

それは友好的資産パイプラインで資産を参照するために、レールのヘルパーメソッドを持つコンポーネントのCSSファイル内のURL参照を書き換えることにより、部品の相対的な資産のパスを解決します提供rakeタスクで、この問題を修正中バウアーレール補助を方法。詳細については、BowerRails::Performer#resolve_asset_pathsを参照してください。

すべてのbower_componentsをリポジトリにチェックインするので、bower：installとbower：resolveを実行します。次に、パッケージ内で参照されているイメージを、ステージング環境と本番環境用のconfig.assets.precompileリストに追加する必要があります。例えば、Bowerとレールを使ってレールプロジェクトにselect2 javascriptコンポーネントを追加する設定です。

bower.json：

{ 
    "name": "Acme", 
    "private": true, 
    "dependencies": { 
     "select2": "3.5.1" 
    } 
} 

アプリ/資産/ JavaScriptの/ application.js.coffee：

#= require select2/select2 

アプリ/資産/スタイルシート/ application.css.sass

//= require select2/select2 

config/environments/staging.rbおよびconfig/environments/production.rb：

config.assets.precompile += ["select2/*.png", 
          "select2/*.gif"] 

これは完璧ではありませんが、javascriptコンポーネントの依存関係管理を提供し、アセットパイプライン用に有効なjavascriptコンポーネントを取得するために必要なものを見つけようとします。