如何在Rails应用程序中使用Bower管理Javascript依赖项？

Question

Jails依赖项在我的Rails应用程序中不断增长,并且它会导致一些问题.首先,有这么多,跟踪和更新不同Javascript库的版本变得很困难.起初我尝试将它们变成宝石,但后来我必须管理它们.有些已经是宝石(比如backbone-rails),但我希望有一个一致的包管理器.

所以我正在研究Bower,"网络包管理器".来自kaeff和af83的一些博客帖子很有帮助,但我仍遇到问题.我希望这个问题可以导致人们可以用来为他们的项目找到最佳解决方案的各种答案.

我特别希望看到在Heroku部署中通过Bower管理资产的建议.

Answer 1

一种方法是使用Sprockets版本,允许您application.js需要Bower定义的包.Sprockets 2.6中添加了此功能,由于版本限制,Rails 3.x将不允许您进行捆绑.要获得该功能,您可以捆绑gem "sprockets", "2.2.2.backport1".

这将使Sprockets也开始寻找资产vendor/assets/components.路径是供应商/组件,因为Bower包也可能包含CSS或图像资产,而不仅仅是Javascript.Sprockets在需要包时知道要包含的Javascript的方式是通过读取属性的bower.json文件main,该文件说明管道应该包含哪些文件.这里有一个问题是许多Bower软件包不提供此属性或供应主要来源,假设RequireJS可用(例如d3).您可以看到定义了哪个源主体bower list --map.

如果main不适合您,您只需使用Bower来管理单个远程JS文件而不是包.Josh Peek有一个证明这一点的要点.鲍尔的最新版本预计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和链轮将在你的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资产,您可以使用bower-rails,但使用起来没什么意义lib.该gem还提供了一些Rake任务,但它们除了基本的Bower命令之外没有做任何其他事情.

据我所知,在资产编制过程中,根本没有必要安装Bower.因此,如果您正在使用像Heroku这样的部署环境,则需要提交vendor/assets/components目录并通过bower命令对其进行更新.

如果您需要使用一个指令的整个Bower依赖集,那将是很好的application.js.来自kaeff的要点说明了如何创建require_bower_dependencies指令.没有宝石为你做这件事.在那之前,你必须声明在每个都依赖bower.json和application.js.

Answer 2

Checkout 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)
Rails-Assets项目的未来正在讨论中.请检查主题并做出自己的决定:使用它或找到解决方法.

Answer 3

刚刚写了一篇关于做Rails + Bower + Heroku的指南.希望有所帮助.

Answer 4

我在过去的几天里一直在解决这个问题,并且已经确定了以下过程.

使用bower-rails gem.它提供了许多不错的rake任务,有助于将bower的使用与rails应用程序和资产管道集成.我更喜欢坚持使用bower.json配置而不是bower-rails提供的基于ruby的DSL.我坚持使用默认的凉亭位置来存储供应商/资产/ 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在上面提到的rails和bower不能很好地使用具有css和图像的javascript包,特别是参考图像的css.Bower-rails通过提供的rake任务帮助解决此问题:

rake bower:resolve 

它通过使用rails helper方法重写组件css文件中的url引用来以资产管道友好的方式引用资产,从而解析组件中的相对资产路径.有关更多详细信息,请参阅BowerRails :: Performer#resolve_asset_paths.

我的首选是将所有bower_components签入我们的存储库,因此我们运行bower:install,然后是bower:resolve.然后,您需要将包中引用的图像添加到您的登台和生产环境的config.assets.precompile列表中.例如,这里是使用bower和rails 将select2 javascript组件添加到rails项目的设置.

bower.json:

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

应用程序/资产/ Java脚本/ 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组件.