WebPackerからJSBunling Railへの移行方法

Install jsbundling-rails

Swap pack_tag for include_tag

Import stimulus controllers

Migrate JS entrypoint

Remove webpack

Github Actions

Heroku

JSBunling Railsのインストール
gemfileに追加します

gem 'jsbundling-rails'

端末で次のコマンドを実行します.

bundle install
rails javascript:install:esbuild

スワップパッケージのタグ
JSBinding :インストールコマンドを挿入するjavascript_include_tag タグの上にタグを付けるapplication.html.erb ファイル.このタグwilは新しいJavascriptエントリポイントを含みますjavascript/application.js ビルドスクリプトがアプリケーションに含まれます.
Webpackのレガシーを削除するstylesheet_pack_tag :

# old
<%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>

# new
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

あなたのアプリケーションが複数のレイアウトをレンダリングする場合は、必ず削除するjavascript_pack_tag そこも.

輸入刺激コントローラ
既にインストールした場合でも、再度コマンドを実行してください.これは、すべての既存の刺激コントローラを正しくインポートします.

rails stimulus:install

今、新しい刺激コントローラを追加または削除した後、自動生成するコマンドを使用することができますcontrollers/index.js ファイル.

rails stimulus:manifest:update

JSエントリポイントの移行
内容を移動するjavascript/packs/application.js tojavascript/application.js . ファイルの移行後、WebPackerによって使用されたJavaScript/Packフォルダを削除します.
JavaScriptフォルダ内の相対パスでディレクトリをインポートするようにします.

// old
require("channels")

//new
import "./channels"
import "./controllers"

webpackの削除
Webpackとその触手は、最終的にアプリケーションから削除することができます.

ウェブパッケージング

gem 'webpacker', '~> 5.4'

b .ウェブパックパッケージの削除
Webpackパッケージとプラグインは、時間をかけて蓄積することもできます.私にとっては、

@Rails/webpacker

Webpack

Webpack CLI

ウェブパック

webpack devサーバ

プラグインのクリーン

@刺激的なウェブパックヘルパー

ウェブパックファイルを削除
最後に、すべての設定ファイルと起動ファイルを削除します.

ビン/ウェブパック

bin/webpack devサーバ

config/webpacker.気象研

config/webpack (ディレクトリ)

Githubアクション
GithubアクションをCI/CDとして使用する場合は、追加のビルドステップを追加して糸ビルドを実行します.糸のビルドは、あなたのpackage.json ファイル"build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds" . すべてのJavaScriptファイルをワークフローファイル内のテストを実行する前にバンドルされる必要があります.

- name: Build Esbuild
  run: yarn build

7
更新は、コメントに記載されているように、今では冗長です.参照https://devcenter.heroku.com/changelog-items/2284 .
Herokuを使用してアプリケーションを展開する場合、HerokuはWebPack用の糸を自動的にインストールしません**
したがって、Ruby以前にノードBuildPackを明示的に設定する必要があります.端末またはHerokuダッシュボードでこれを行うことができます.

端末

heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby

ダッシュボード

リソース

** ブログ一覧にもどるyarn missing step