web-dev-qa-db-ja.com

RailsアプリでBowerを使用してJavascriptの依存関係を管理する方法は？

私のRailsアプリでは、Javascriptの依存関係が大きくなっており、いくつかの問題が発生しています。1つは、非常に多くの場合、さまざまなJavascriptライブラリのバージョンを追跡および更新することが困難になることです。 それらを宝石に変える 、しかしそれから私はそれらを管理しなければなりません。いくつかはすでに宝石です（バックボーン-Railsのように）が、私は1つの一貫したパッケージマネージャーが欲しいです。

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

特に、HerokuデプロイでBowerを介してアセットを管理するためのアドバイスを求めています。

ruby-on-railssprocketsbower
26
Turadg

1つの方法は、application.jsがBowerによって定義されたパッケージを要求できるようにするバージョンのSprocketsを使用することです。この機能はSprockets2.6で追加されました。Rails 3.xではバンドルできません バージョン制限のため 。この機能を利用するには、バンドルできます。 gem "sprockets", "2.2.2.backport1"。

これにより、Sprocketsはvendor/assets/componentsでもアセットを探し始めます。 BowerパッケージにはJavascriptだけでなく、CSSまたは画像アセットも含まれる可能性があるため、パスはベンダー/コンポーネントです。 Sprocketsがパッケージが必要なときにどのJavascriptを含めるかを知る方法は、パイプラインに含める必要のあるファイルを示すmainプロパティのbower.jsonファイルを読み取ることです。ここでの落とし穴は、多くのBowerパッケージがこのプロパティを提供しないか、RequireJSが利用可能であると想定するメインソースを提供しないことです（例： d ）。 bower list --mapで定義されているソースメインを確認できます。

mainが適切でない場合は、Bowerを使用して、パッケージの代わりに単一のリモートJSファイルを管理できます。 Josh Peekには これを示す要点 があります。 Bowerの最新バージョンでは、bower.jsonではなくcomponent.jsonが必要なので、手順を更新しました。

$ 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をロードします。次に、application.jsで//= require jqueryを実行すると、Sprocketsは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"
  }
}

libアセットとvendorアセットを1つの構成ファイルで管理する場合は、 bower-Rails を使用できますが、lib。そのgemはいくつかのRakeタスクも提供しますが、それらは基本的なBowerコマンド以上のことは何もしません。

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

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

26
Turadg

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

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（26.01.2016）
Future ofRails-Assetsプロジェクトが議論されています。 スレッド を確認して、自分で決定してください。使用するか、回避策を見つけてください。

15
a.s.panchenko

Rails + Bower + Herokuを実行するための ガイド を作成しました。お役に立てば幸いです。

8
Aidan Feldman

私はこの数日間この問題に取り組んでおり、次のプロセスに落ち着きました。

bower-Rails gemを使用します。これは、bowerの使用をRailsアプリケーションおよびアセットパイプラインと統合するのに役立つ多くのNicerakeタスクを提供します。RubyベースのDSLではなくbower.json構成を使用することを好みます。そのbower-Railsが提供します。vendor/ assets/bower_componentsにアセットを格納するデフォルトのbowerの場所を使用します。必ず以下を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のように、Railsとbowerは、cssと画像を含むjavascriptパッケージ、特に画像を参照するcssではうまく機能しません。Bower-Railsは、提供されたrakeでこの問題を修正するのに役立ちます仕事：

rake bower:resolve

コンポーネントcssファイルのurl参照をRailsヘルパーメソッドで書き換えて、アセットパイプラインに適した方法でアセットを参照することにより、コンポーネントの相対アセットパスを解決します。 BowerRails :: Performer＃詳細については、resolve_asset_paths を参照してください。

私の好みは、すべてのbower_componentsをリポジトリにチェックインすることです。そのため、bower：installを実行してからbower：resolveを実行します。次に、パッケージ内で参照されているイメージを、ステージング環境と本番環境のconfig.assets.precompileリストに追加する必要があります。たとえば、ここに select2 javascriptコンポーネントをbowerとRailsを使用してRailsプロジェクトに追加するためのセットアップがあります。

bower.json：

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

app/assets/javascripts/application.js.coffee：

#= require select2/select2

app/assets/stylesheets/application.css.sass

//= require select2/select2

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

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

完璧ではありませんが、JavaScriptコンポーネントの依存関係を管理できます。また、アセットパイプラインで目的のJavaScriptコンポーネントを有効にするために、どのgemを取り込む必要があるかを把握することをお勧めします。

5
rwc9u

Railsプロジェクトでbowerを使用するのが良い考えだと誰かが思った場合は、もう一度考えてみてください。

Bowerパッケージは、Railsまたはスプロケットと統合するように作成されていません。

これはどういう意味ですか：

  • 通常、スプロケットrequireディレクティブを介してJavaScriptを含めるためのマニフェストindex.jsを指定しません。
  • バウアーパッケージを分析して探し回る必要があり、必要なものと場所を正確に把握する必要があります（必要なパスは長くなります）
  • バウアーパッケージはメインキーを一律に指定しておらず、現在のスプロケット/バウアーサポートはそれらを無視しているようです
  • フォント、画像、テンプレートなどの追加のアセットは、プロダクションアセットのコンパイルには含まれません（Rails4にはapp/assets/xxxのみが含まれます）
  • Config.assets.precompileパターンを使用して「回避」しようとすると、問題は粗くなり、bowerコンポーネントディレクトリで多くの問題が発生します。
  • bowerパッケージはsprocketurlパスヘルパーを使用しないため、CSS/SCCS内の画像とフォントへの参照には正しいアセットパスがありません。それで頑張ってください。
  • バウアーパッケージを使用するすべてのプロジェクトのすべての問題を解決する必要があります
  • bundle installはプロジェクトの依存関係では機能しなくなり、別のパッケージマネージャーも使用する必要があります

対照的に、アセットgemは作成が簡単で、アセットをプロジェクトに取り込むための統一された抽象化を提供します。 Railsプロジェクトでうまく機能するように、元のファイルを変更してアセットヘルパーを使用する機会があります。アセットジェムの作成にはまともな blog があり、ジェムの作成にも一般的な railscast があります。

IMO Railsコミュニティにとって、Railsアセットパイプラインにプラグインするように設計されていないバウアーパッケージの問題に対処する必要があるすべてのプロジェクトよりも、最新のアセットジェムを維持する方がよいでしょう。

1
Andrew Hacking