web-dev-qa-db-ja.com

Rails 3.1アセットパイプラインと手動で注文されたJavascriptには

既存のアプリを新しい3.1アセットパイプラインレイアウトに変換しようとしていますが、特定の順序にする必要がある多くのベンダーファイルを含めたいと考えています（underscore.jsとバックボーンは1つのペアです）。そのため、= require_tree .を使用してベンダーファイルを取得することはできません（各ファイルの名前をプレフィックスで変更する必要はありません。ヤック）。

以下は私のapp/assets/javascripts/application.jsファイル内にあります：

 // = require modernizr-1.7 
 // = require jquery-1.6.1 
 // = require underscore-1.1.5 
 // = requireバックボーン-0.3.3 
 // = require_tree。

With/out拡張、with/out require_treeおよびwith/outの相対パスのあらゆる組み合わせを試しましたが、何も機能しません。ベンダーファイルはすべて/vendor/assets/javascripts/にあります。

私はばかげていると感じているのは、これがそのような明らかなユースケースのように見えるからです（名前に特定のファイルをJSに含めるのは一般的ですよね？）。

ruby-on-rails-3asset-pipelinesprockets
52
beseku

特定の順序で各ファイルを要求してから、次を追加できます。

//= require_self

の代わりに：

//= require_tree .
29
martinciu

可能な構造は2つあります。最初の構造と2番目の構造です。次の両方の例では、/assets/externals.jsでパッケージを公開します。このパッケージはjavascript_include_tagできますが、application.jsファイルで要求することもできます。

最初の1つ

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
48
Romain Tribes

私の答えはRails 3.1rc4に当てはまります。他のバージョンでも同じように機能するかどうかはわかりません。

.jsファイルがapp/assets/javascripts /またはvendor/assets/javascripts /にあるかどうかにかかわらず、実際にすべてのrequireステートメントをapp/assets/javascripts/application.jsに配置できます。

そのようです：

// 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を含めたのは、個々のコントローラー（pages.js.coffee、users.js.coffee）用の他のjavascriptファイルと、サイト全体のもの（site.js.coffee）用の一般的なJavaScriptファイルがあるためです。

一方、ファイル構造は次のとおりです。

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を心配する必要はありません。

さらに重要なことは、頻繁に使用される1つのファイル内のすべてのrequireステートメントを制御することで、より安全でクリーンなものであることがわかりました。

8
Olivier Lacan

library.js in in vendor/assets/javascriptsそして単純に

//= require library.js

あなたのapplication.js、 番号？

6
muxcmux

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

4
justingordon