Zenn
😀

rails7にアップグレードしたログ ( esbuild + propshaft )

2022/02/13に公開
Rails
esbuild
スライド
propshaft
tech

https://slidict.io をrails7にアップグレードしてwebpackerから脱したのでそれのログを残します。
rails7では、webpackerと決別できるためsprockets-railsとwebpackerだった構成が一本化されさらにesbuild(rollup, webpackも使える) によりビルド速度が劇的に向上しています。

importmapにしないの？

rails7へのアップグレード

sprockets-rails (rails_adminで使っていた) + webpacker 構成で動かしていたため、今回のアップデートでは、webpacker, sprocketsを削除することにしました。

削除したgemは以下です。
※webpackerを削除しなくても私の環境では使えましたが、あとあとはまることになるので削除することにしました。
※sprocket-railsは、rails依存でインストールしていたため、Gemfileに追加してないため記載していません。

  • webpacker
  • sass-rails
  • yui-compressor

また、私の環境で不要なyarn packageは以下でした。

あとは、Gemfileのrails部分を以下のように修正し

gem 'rails', '>= 7.0.0'

rails app:update をするだけです。

propshaft

rails7は、importmap-railsをデフォルトで使用するようですが前述の理由によりpropshaftを使うことにします。propshaftは、assets::precompileタスクを提供したり、/assets配下/stylesheetは以下のパスを通してくれたりします。

執筆時点ではv1.0.0にPRが取り込まれておらず、assets:precompileがないとxsbundling-railsのインストールがこけるので propshaftを最初に入れます。

Gemfileに以下を追加します。

gem 'propshaft'

esbuild (jsbundling-rails, cssbundling-rails)

機能的にはwebpackerの代替となります。esbuildでは、rails側はjsbundling-rails, cssbundling-railsを使うことになります。

Gemfileに以下を追加します。

gem 'jsbundling-rails'
gem 'cssbundling-rails'

bundle installしたら
./bin/rails javascript:install:esbuild, ./bin/rails css:install:sass をします。
javascriptはwebpackかrollupが選べます
cssはtailwindなどが選べます

package.jsonに以下のスクリプトを追加します

  "scripts": {
    "build": "esbuild app/assets/javascripts/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  },

tsconfig.jsonがある場合は、targetをes6に設定します。

起動

webpackerではbin/webpack-dev-serverの起動が必要だったのですが、bin/devだけでよくなりました。

運営サイトでスライドにしてみました -> https://slidict.io/slides/620881cc9086a9001906bf32
読みにくいので改善しないと・・・

Discussion