アルパカログ

Webエンジニア兼マネージャーがプログラミングやマネジメント、読んだ本のまとめを中心に書いてます。

Ruby on Rails エンジンにおけるアセットパイプラインの設定方法

f:id:otoyo0122:20200902092941p:plain:w300

Ruby on Railsにおいて、アセットパイプラインはデフォルトで有効になっており、JavaScriptファイルやCSSファイルを圧縮して配布するのに使われます。

しかし、アセットパイプラインはライブラリ間のバージョン違いによって躓きやすく、「エンジン」を使う場合には、設定に少し戸惑うかもしれません。

このエントリでは、Ruby on Rails 6のエンジンでアセットパイプラインを使うための設定を説明します。

設定方法

エンジンについては下記チュートリアルを参照してください。

以下、エンジン名はチュートリアルで登場する Blorgh を使って説明します。

アセットパイプラインを使用するためにはsprocketsが必要です。

コメントアウトされていないか確認します。

blorgh/bin/rails

require "sprockets/railtie"

テストディレクトリ以下にあるdummyアプリケーションの方も併せて確認しておきましょう。

blorgh/spec/dummy/config/application.rb

require "sprockets/railtie"

レイアウトのheadタグ内に、生成されたCSSとJavaScriptを読み込むタグを追加します。

<!DOCTYPE html>
<html>
<head>
  ...

  <%= stylesheet_link_tag "blorgh/application" %>
  <%= javascript_include_tag "blorgh/application" %>
</head>
...

アセットの配置場所をblorgh/app/assets/にするために、エンジンにパスの設定を追加します。

blorgh/lib/blorgh/engine.rb

module Blorgh
  class Engine < ::Rails::Engine
    isolate_namespace Blorgh

    initializer "blorgh.assets.precompile" do |app|
      app.config.assets.paths << File.expand_path("../../app/assets", __dir__)
      app.config.assets.precompile += ["blorgh/application.css", "blorgh/application.js"]
    end
  end
end

もし、削除ボタンを押した際にlink_toメソッドで確認ダイアログを出したい場合、そのままだとDELETEではなくGETでリクエストしてしまいます。

DELETEメソッドとしてリクエストしたい場合(実体はPOST)、Ruby on Rails 6 ではrails-ujsを手動で追加してあげる必要があります。

rails-ujsについては下記の記事がとても参考になるのでぜひご覧ください。

blorgh/app/assets/javascripts/blorgh/application.js

...
//= require rails-ujs ←追加
//= require_tree .

これでエンジン以下でアセットパイプラインが使えるようになりました。

以上です。

このエントリでは、Ruby on Rails 6のエンジンでアセットパイプラインを使うための設定を説明しました。

参考になった方は、ぜひ「はてブ」やSNSでシェアしていただけると嬉しいです。