Ryo | Web developer blog

Web開発者のブログです。

railsでwebpackerのみ使う方法

f:id:ryogift:20210715010757j:plain
Macrovector - jp.freepik.com によって作成された design ベクトル

rails6で新規にアプリケーションを作成するとアセットパイプラインは、SprocketsとWebpackerが同梱されています。主にCSSファイルと画像ファイルはSprockets、JavaScriptファイルはWebpackerで管理されています。新規にアプリケーションを作成する場合に限ってですが、二つのアセットパイプラインが共存しているのは紛らわしいためWebpackerでCSSファイル、画像ファイル、JavaScriptファイルを管理出来るようにしていきたいと思います。

目次

  1. 事前に
  2. アセットパイプライン
  3. Sprocketsを除外したアプリケーション
  4. Sprocketsの除外方法

1. 事前に

今回、作成したアプリケーションは以下のバージョンのrubyrailsを事前にインストールしています。

version:
  ruby: 3.0.2
  rails: 6.1.4

2. アセットパイプライン

アセットパイプラインやWebpackerについては以下のRailsガイドに詳しく記載されていますので、ご参照ください。

railsguides.jp

railsguides.jp

単純に新規作成ではSprocketsを除外するオプションもありますが、既存のアプリケーションからSprocketsを除外していく方法の参考にもなるかと思いますので、今回はデフォルトの状態から手作業でSprocketsを除外していきます。

rails new appname --skip-sprockets

3. Sprocketsを除外したアプリケーション

Sprocketsを除外したアプリケーションの最終的なコードは以下のリポジトリをご参照ください。

github.com

4. Sprocketsの除外方法
1. Sprocketsを除外します。

変更点は以下をご参照ください。

github.com

変更内容は、sass-railsライブラリの削除、assetsフォルダの削除や各種assetsの設定削除、webpackerにCSSファイルと画像ファイルを管理するように変更しています。

デフォルトでアプリケーションを新規作成すると、require "rails/all"の指定のみになりますので、require "sprockets/railtie"を除いた各種ライブラリを個別に呼び出すように追加しています。

# config/application.rb
- require "rails/all"
+ require "rails"
+ # Pick the frameworks you want:
+ require "active_model/railtie"
+ require "active_job/railtie"
+ require "active_record/railtie"
+ require "active_storage/engine"
+ require "action_controller/railtie"
+ require "action_mailer/railtie"
+ require "action_view/railtie"
+ require "action_cable/engine"
+ require "rails/test_unit/railtie"
2. Generatorからassetsファイルの生成を除外します。

変更点は以下をご参照ください。

github.com

3. 動作確認

最後にアプリケーションのテスト実行や起動確認、また、assets:precompileでpublicディレクトリにpacksディレクトリのみが作成されていると、Sprocketsの除外が出来ていることを確認することが出来ます。