Question

我的Rails应用程序中的Javascript依赖关系正在增长，这导致了一些问题。首先，有这么多，跟踪和更新不同Javascript库的版本变得很困难。起初我尝试了turning them into gems，但后来我必须管理它们。有些已经是宝石（比如backbone-rails），但我希望有一个一致的包管理器。

所以我正在研究Bower，“网络包管理器”。一些博文from kaeff和from af83有所帮助，但我仍遇到问题。我希望这个问题可以导致人们可以用来为他们的项目寻找最佳解决方案的各种答案。

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

Answer 1

一种方法是使用Sprockets版本，允许您的application.js需要Bower定义的包。 Sprockets 2.6中添加了此功能，Rails 3.x将不允许您捆绑due to a version restriction。要获得该功能，您可以捆绑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有a gist that demonstrates this。 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资产，可以使用bower-rails，但使用lib没有太大意义。该gem还提供了一些Rake任务，但它们除了基本的Bower命令之外什么都不做。

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

如果您需要在application.js中使用一个指令设置整个Bower依赖关系，那将是很好的。 gist from kaeff说明了如何创建require_bower_dependencies指令。没有宝石为你做这件事。在此之前，您必须在bower.json和application.js中声明每个依赖项。

Answer 2

结帐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（2016年1月26日）
Rails-Assets项目的未来正在讨论中。请检查the thread并自行决定：使用它或找到解决方法。

Answer 3

刚刚写了a guide来做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"
    }
}

应用程序/资产/ 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组件。

Answer 5

如果其他人认为在你的rails项目中使用bower是个好主意，那就再想一想。

Bower包根本不与导轨或链轮集成。

这意味着什么：

他们通常不会指定清单index.js来通过sprockets require指令包含你的javascript。
您将需要在凉亭包中进行分析和研究，并准确地确定您需要的地方以及从哪里（您的需求路径变长）
bower包没有统一指定主键，即使他们这样做，当前的sprockets / bower支持似乎也忽略了它们
字体，图片和模板等其他资源不会包含在您的生产资产编辑中（Rails 4仅包含app / assets / xxx）
使用config.assets.precompile模式尝试“绕过”问题是粗粒度的，并且会在您的凉亭组件目录中捡到很多东西
bower包不会使用sprocket url路径助手，因此CSS / SCCS中对图像和字体的任何引用都不会有正确的资产路径。祝你好运。
您必须解决使用bower软件包的每个项目中的所有问题
bundle install不再适用于您的项目依赖项，您还必须使用其他程序包管理器

相比之下，资产宝石很容易创建并提供统一的抽象，以便将资产拉入项目。您有机会修改原始文件并使用资产助手，以便与rails项目良好协作。创建资产宝石有一个不错的blog，以及创建宝石的一般railscast。

IMO对于rails社区来说，维护最新的资产宝石会比每个必须处理从未设计为插入rails资产管道的bower软件包问题的项目更好。

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

5 个答案: