Rails - 特定のページにのみJavascriptファイルを含める方法

Question

私はサイトに組み込まれカスタマイズされたWYSIWYGエディタを持っています。 WYSIWYGエディタを使用してページにロードするだけのJavascriptファイルがたくさんあります。現在、すべてのページにロードされています（特定のページの他のJavascriptを破壊することさえあります）。

現在、Javascriptファイルはassets/javascript/wysiwyg/にあり、application.jsにrequireファイルとして含まれていませんが、アセットパイプラインのためにすべてのページに含まれています（私は思っています）。

私はが他のページからを除外できるかどうかを知りたいと思っています。アセットパイプラインからpublic/ディレクトリにそれらを移動し、適切なビューにそれらを（コーヒースクリプトファイルに、おそらく？）インポートできますか？

Answer 1

アプリケーションのpublic/javascripts/libディレクトリに手動でロードするJavascriptファイルを置くことができ、それらはアセットパイプラインには含まれません。必要なページに手動で読み込むことができます。例えば

、一つのプロジェクトで、私はChosen jQueryプラグインを使用して、私はそうのようにそれをロードします。あなただけのあなたのファイルを参照する必要があるので、

<script type="text/javascript" src="/javascripts/lib/chosen.jquery.min.js"></script> 

Railsは、public/からパブリック・ファイルをソースしますそこに（public/ビットを削除します）。

このプロジェクトはかなり大きく、88個のコントローラ、662個のアクション、合計38個のカスタムjavascriptライブラリがあり、マークダウンエディタ、チャーティングライブラリ、jQuery UIなど、アプリを散発的に使用しています。

スプロール現象を管理し、各ページを可能な限り密接に保つために、私は2つのことを行っています：1）コントローラで、インスタンス変数@page_libsをロードし、必要に応じて専門のJavascriptを含めるために@page_libsの値を使用します。

コントローラのアクションは、次のようになります。

def edit 
    @products = products.find(params[:id]) 
    @page_libs = ['ui', 'textile'] 
end 

そしてapp/views/layouts/application.html.erbは正しい場所でこれを含まれています：最初が含まれていることを

<%- if (@page_libs || []).include?('ui') || (@page_libs || []).include?('table') %> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="/javascripts/lib/chosen.jquery.min.js"></script> 
<% end -%> 
<%- if (@page_libs || []).include?('swiper') %> 
    <script type="text/javascript" src="/javascripts/lib/idangerous.swiper.min.js"></script> 
<% end -%> 
<%- if (@page_libs || []).include?('table') %> 
    <script type="text/javascript" src="/javascripts/lib/jquery.handsontable.full.js"></script> 
<% end -%> 
<%- if (@page_libs || []).include?('textile') %> 
    <script type="text/javascript" src="/javascripts/lib/textile.js" charset="utf-8"></script> 
<% end -%> 

注意が私からロードjQueryのUIのためのものです私のアプリのpublicからではなく、CDNです。この手法は、外部ライブラリだけでなく、ホストするものと同様に機能します。実際、私のアプリのほとんどのページは2つの外部ライブラリ（jQueryとUnderscore.js）にしか依存しませんが、外部ソースから最大16の他のJavascriptライブラリを読み込むことができます。ページ上の外部ライブラリを制限することで、ページの読み込み時間が大幅に短縮されるため、アプリケーションのパフォーマンスが大幅に向上します。

Javascriptライブラリには、CSSコンポーネントも含まれることがあります。または、ページ固有のCSSを含めることさえできます。外部のスタイルシートでも同じアプローチが可能です。

<%- if (@page_libs || []).include?('ui') %> 
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <link rel="stylesheet" type="text/css" href="/stylesheets/lib/chosen.min.css"> 
<% end -%> 
<%- if (@page_libs || []).include?('swiper') %> 
    <link rel="stylesheet" type="text/css" href="/stylesheets/lib/idangerous.swiper.css"> 
<% end -%> 

この方法で、私は関係なく、必要とされているどのように多くの（または少数）の、ライブラリを管理するためのプロジェクトでは、単一のポイントを持っています。これらは、対応するページ固有のスタイルシートは、上記のJavaScriptライブラリのために「が含まれる」ですページのおそらく、最終的に、ApplicationControllerに一連のカスタムのハンドラを作成して、ページに必要なライブラリを定義することになります。

before_action: :include_library_ui,  only: [:new, :edit] 
before_action: :include_library_swiper, only: [:show] 

これはコントローラの動作をもう少し整理し、依存関係を特定しやすくします。しかし、私のコードベースのサイズと残りの課題を考えると、私はまだこの跳躍をしていません。たぶんあなたが始めるためにそうするよう促すでしょう。