過去の記事はwebpackerは捨てて、、、みたいな記事が多かったですが、
Rails6ではデフォルトになる webpackerにいい加減慣れておきます。(もう6はリリースされていますがw)
今まで当然のようにSprocketsに依存していましたが、
> Rails.application.config.assets.paths
=> ["/Users/u/file/app/assets/config",
"/Users/u/file/app/assets/images", "/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/chartkick-3.0.2/vendor/assets/javascripts",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/parsley-rails-2.8.1.0/vendor/assets/javascripts",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/parsley-rails-2.8.1.0/vendor/assets/stylesheets",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/flat-ui-rails-0.0.2/vendor/assets/images",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/flat-ui-rails-0.0.2/vendor/assets/stylesheets",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/bootstrap3-datetimepicker-rails-4.17.47/vendor/assets/javascripts",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/bootstrap3-datetimepicker-rails-4.17.47/vendor/assets/stylesheets",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/momentjs-rails-2.20.1/vendor/assets/javascripts",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/coffee-rails-4.2.2/lib/assets/javascripts",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/actioncable-5.2.2/lib/assets/compiled",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/actionview-5.2.2/lib/assets/compiled",
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/activestorage-5.2.2/app/assets/javascripts",
#<Pathname:/Users/u/file/node_modules>]
これを
> Rails.application.config.assets.precompile
=> [#<Proc:0x00007fe7e415d528@/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/sprockets-rails-3.2.1/lib/sprockets/railtie.rb:84 (lambda)>, /(?:\/|\\|\A)application\.(css|js)$/]
これだけに削減しました。
javascript_include_tagとstylesheet_link_tag は今回でばいばい。
apps/images以外は、frontend/packs 以下にjsファイルを、 frontend/stylesheets以下にcss系を配置しました。(この辺は他の記事が優秀なので割愛)
移行にあたり はまったところ集(エラーと対応方法)
1. manifest.json(public/packsにできる)も最新のコンパイルされたファイルに変更されるが、staging・productionなどで走らせるとローカルでコンパイルしといたファイル(manifest.jsonがあるのに)また Compiling...が走ってしまう。
【解決法】 デフォルトでは、webpacker.ymlのpublic_output_pathはすべて同じなので、一見環境変数による影響がないのかなと思っていましたが、内部的には保持している様子。そのため、RAILS_ENVで指定していないコンパイルだった場合、またCompiling..が走ってしまうようです。
環境によって出力される先(public/packs部分を出し分ける)
当然clobber(削除)するときも環境変数を見ているので、RAILS_ENVを指定しましょう。
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
public_output_path: packs-production
2. compiled failed: (空白) で再度Compling...し始める
【解決法】
が表示された場合、理由が見えないので、いったん bin/webpack を走らせて、そうすると理由がわかる。ので、修正して、またcompileさせる
3. Webpackerを入れてるのに「ねえよ」って怒られる
以下でリフレッシュ
> yarn install --check-files
4. 今までちゃんとbin/webpackできていたのに、急に「jQueryねえよ」って言われだす
> yarn upgrade
6. ファイルがなく500エラー
【解決法】
コンパイルし直す(dev-server -> productionみたいに変更があった場合にファイルエラー。再度立ち上げ直す。念の為clobberしておく。
途中コンパイル関係のエラーはコンパイルしてみないと結果がわからない&コンパイルするのに時間がかかる ので、どうなるかと思ったけど、驚くほどファイル構造がすっきりした。あとはimagesの移行ですね〜。
参考
Rails Asset Pipelineがうまくいかないときの問題の切り分けかた
https://qiita.com/metheglin/items/c5c756246b7afbd34ae2
webpack 4 入門
https://qiita.com/soarflat/items/28bf799f7e0335b68186