Rails 3.1资产管道和手动订购Javascript需要

时间:2011-05-27 08:57:36

标签: ruby-on-rails-3 asset-pipeline sprockets

我正在尝试将现有应用转换为新的3.1资产管道布局,并且希望包含许多必须按特定顺序排列的供应商文件(underscore.js和backbone是一对)。因此,我不能只使用= require_tree .来提取我的供应商文件,(不用前缀重命名每个文件.Yuck)。

以下内容属于我的app/assets/javascripts/application.js文件:

//= require modernizr-1.7
//= require jquery-1.6.1
//= require underscore-1.1.5
//= require backbone-0.3.3
//= require_tree .

我尝试了with / out扩展的每个组合,带有/ out的require_tree和with / out的相对路径,没有任何效果。我的所有供应商文件都在/vendor/assets/javascripts/

我觉得自己很愚蠢,因为这似乎是一个明显的用例,(包括按顺序名称的特定文件在JS中很常见,不是吗?)我必须做一些愚蠢的事情吗?

5 个答案:

答案 0 :(得分:48)

您有两种可能的结构:第一种和第二种。 通过以下两个示例,您可以在/assets/externals.js公开包。 您可以javascript_include_tag此软件包,但您也可以在application.js文件中要求它。

第一个

vendor/
├── assets
│   ├── javascripts
│   │   ├── externals.js
│   │   ├── modernizr-1.7.js
│   │   └── underscore-1.1.6.js
│   └── stylesheets
└── plugins

文件externals.js包含:

//= require ./underscore-1.1.6.js
//= require ./modernizr-1.7.js

第二个

vendor/
├── assets
│   ├── javascripts
│   │   └── externals
│   │       ├── index.js
│   │       ├── modernizr-1.7.js
│   │       └── underscore-1.1.6.js
│   └── stylesheets
└── plugins

文件index.js包含:

//= require ./underscore-1.1.6.js
//= require ./modernizr-1.7.js

答案 1 :(得分:29)

您可以按特定顺序要求每个文件,然后添加:

//= require_self

而不是:

//= require_tree .

答案 2 :(得分:8)

我的回答适用于Rails 3.1rc4,我不知道它是否与其他版本的功能相同。

你可以将所有require语句放在app / assets / javascripts / application.js中,无论.js文件是否在app / assets / javascripts /或vendor / assets / javascripts /

像这样:

// this is in app/assets/javascripts/application.js

//= require modernizr-2.0
//= require jquery
//= require jquery_ujs
//= require jqueryui-1.8.12
//= require jquery.easing-1.3
//= require jquery.noisy
//= require jquery.jslide-1.0
//= require respond
//= require smoke
//= require_tree

我在这里包含了require_tree,因为我有我的个人控制器的其他javascript文件(pages.js.coffee,users.js.coffee)和一般用于站点范围的东西(site.js.coffee)

同时这是文件结构。

app/
├── assets
│   ├── javascripts
│   │   ├── application.js
│   │   ├── pages.js.coffee
│   │   ├── users.js.coffee
│   │   └── site.js.coffee
│   └── stylesheets
└── plugins

vendor/
├── assets
│   ├── javascripts
│   │   ├── jquery.easing-1.3.js
│   │   ├── jquery.jslide-1.0.js
│   │   ├── jquery.noisy.js
│   │   ├── jqueryui-1.8.12.js
│   │   ├── modernizr-2.0.js
│   │   ├── respond.js
│   │   └── smoke.js
│   └── stylesheets
└── plugins

这允许我控制供应商库的加载顺序(这通常很重要)而不用担心我的内部javascript,其中顺序通常较少。

更重要的是,我控制了一个常用文件中的所有require语句,我发现它既安全又清洁。

答案 3 :(得分:6)

我相信你可以library.js放入vendor/assets/javascripts,然后只需

//= require library.js

来自application.js,没有?

答案 4 :(得分:4)

require_tree正是你告诉它的。如果你给它

//= require_tree .

它将文件加载到调用require_tree的当前目录中。如果你给它

//=require_tree ../../../vendor/assets/javascripts

然后你将获得供应商下的javascript。

我不喜欢../../ ..符号,所以我创建了一个名为vendor / assets / javascripts / vendor_application.js的文件,其中包含:

//= require_tree .

加载供应商目录下的javascript。

注意,require会在3个管道位置(app,lib,vendor)中搜索要求的文件。 require_tree是文字的,这应该是应该的样式。

关于此的railscast非常有用:http://railscasts.com/episodes/279-understanding-the-asset-pipeline