https://slidict.io をrails7にアップグレードしてwebpackerから脱したのでそれのログを残します。 rails7では、webpackerと決別できるためsprockets-railsとwebpackerだった構成が一本化されさらにesbuild(rollup, webpackも使える) によりビルド速度が劇的に向上しています。
非対応ブラウザのほうが多い。
https://raw.githubusercontent.com/guybedford/es-module-shims#es-module-shims を読み込めばブラウザをカバーできるようだが、はまる予感がした
Reactコンポーネントはクラスでしか書けないらしい・・・（https://zenn.dev/takeyuweb/articles/996adfac0d58fb で紹介されてました。）
sprockets-rails (rails_adminで使っていた) + webpacker 構成で動かしていたため、今回のアップデートでは、webpacker, sprocketsを削除することにしました。
削除したgemは以下です。 ※webpackerを削除しなくても私の環境では使えましたが、あとあとはまることになるので削除することにしました。 ※sprocket-railsは、rails依存でインストールしていたため、Gemfileに追加してないため記載していません。
webpacker
sass-rails
yui-compressor
また、私の環境で不要なyarn packageは以下でした。
webpack
webpack-dev-server
babel
turbolink
rails/ujs ( deprecatedになった。https://raw.githubusercontent.com/rails/rails/pull/43112 )
css-loader
postcss
mini-css-extract-plugin
sass
style-loader
あとは、Gemfileのrails部分を以下のように修正し
gem 'rails', '>= 7.0.0'
rails app:update をするだけです。
rails app:update
Gemfileに以下を追加します。
gem 'propshaft'
機能的にはwebpackerの代替となります。esbuildでは、rails側はjsbundling-rails, cssbundling-railsを使うことになります。
gem 'jsbundling-rails' gem 'cssbundling-rails'
bundle installしたら
bundle install
javascriptはhttps://raw.githubusercontent.com/rails/jsbundling-rails#installation[webpackかrollupが選べます] cssはhttps://raw.githubusercontent.com/rails/cssbundling-rails#installation[tailwindなどが選べます]
package.jsonに以下のスクリプトを追加します
"scripts": { "build": "esbuild app/assets/javascripts/*.* --bundle --sourcemap --outdir=app/assets/builds", },
tsconfig.jsonがある場合は、targetをes6に設定します。
webpackerではbin/webpack-dev-serverの起動が必要だったのですが、bin/devだけでよくなりました。
https://slidict.io をrails7にアップグレードしてwebpackerから脱したのでそれのログを残します。 rails7では、webpackerと決別できるためsprockets-railsとwebpackerだった構成が一本化されさらにesbuild(rollup, webpackも使える) によりビルド速度が劇的に向上しています。
importmapにしないの？
非対応ブラウザのほうが多い。
https://raw.githubusercontent.com/guybedford/es-module-shims#es-module-shims を読み込めばブラウザをカバーできるようだが、はまる予感がした
Reactコンポーネントはクラスでしか書けないらしい・・・（https://zenn.dev/takeyuweb/articles/996adfac0d58fb で紹介されてました。）
rails7へのアップグレード
sprockets-rails (rails_adminで使っていた) + webpacker 構成で動かしていたため、今回のアップデートでは、webpacker, sprocketsを削除することにしました。
削除したgemは以下です。 ※webpackerを削除しなくても私の環境では使えましたが、あとあとはまることになるので削除することにしました。 ※sprocket-railsは、rails依存でインストールしていたため、Gemfileに追加してないため記載していません。
webpacker
sass-rails
yui-compressor
また、私の環境で不要なyarn packageは以下でした。
webpack
webpack-dev-server
babel
turbolink
rails/ujs ( deprecatedになった。https://raw.githubusercontent.com/rails/rails/pull/43112 )
css-loader
postcss
mini-css-extract-plugin
sass
style-loader
あとは、Gemfileのrails部分を以下のように修正し
rails app:updateをするだけです。propshaft
Gemfileに以下を追加します。
esbuild (jsbundling-rails, cssbundling-rails)
機能的にはwebpackerの代替となります。esbuildでは、rails側はjsbundling-rails, cssbundling-railsを使うことになります。
Gemfileに以下を追加します。
bundle installしたらjavascriptはhttps://raw.githubusercontent.com/rails/jsbundling-rails#installation[webpackかrollupが選べます] cssはhttps://raw.githubusercontent.com/rails/cssbundling-rails#installation[tailwindなどが選べます]
package.jsonに以下のスクリプトを追加します
"scripts": { "build": "esbuild app/assets/javascripts/*.* --bundle --sourcemap --outdir=app/assets/builds", },tsconfig.jsonがある場合は、targetをes6に設定します。
起動
webpackerではbin/webpack-dev-serverの起動が必要だったのですが、bin/devだけでよくなりました。