本篇升級方式的好處
- 降低了現存的 Rails 4 項目升級門檻，不需要 webpacker 就能開心的使用 node packages。
- 若想放棄 jQuery，新頁面將不需要再導入相關依賴。
- 享受 Hotwire + Turbo 帶來的效率及速度優化。 希望能幫到像我一樣正在穩定開發但又想升級項目的朋友們！
先升級至 Rails 6
因為 jsbundling-rails 及 hotwire-rails 本身就限制至少 Rails 6，因此必須升級，但不需要安裝 webpacker，因此不會動到 JS & CSS 大幅降低了升級工作量，以我個人而言，從「太難了我放棄」到「兩天完成升級」🚀。
Rails 的升級步驟可參考 t27duck 撰寫的 How I upgrade Ruby on Rails，其中特別注意 Step 6 Update the Default Configuration and Framework Files。
本篇文章的 Sample Code 在此，建議可以看我分開 commit 的結果比較清楚✌️，也可使用 git checkout 回溯測試看看！
首先我 rails new rails_6_with_jsbundling_rails --skip-javascript 新建一個沒有任何 js 的新項目，當然，也沒裝 webpacker。
然後加入一些 JS 以及 Admin 區塊用來代表項目中已存在的功能。
bundle add jsbundling-rails
rails javascript:install:esbuild
可以看到我已經有了 package.json，表示我可以透過 yarn add 安裝所有 node packages👍。
重點
- 上面安裝 jsbundling-rails 的同時也裝了 foreman，因此請改用
foreman start -f Procfile.dev開啟 Rails server + yarn build。 - 進到 http://localhost:3000/ 會發現舊的 JS 已經全炸了💥，而且layout 裡面載入了兩次 application.js
<head>
...
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
...
</head>
但 application-thisisalonghash.js 原始碼卻是空白的，這是因為現在的 JS entry point 已經改用 app/javascript/application.js 了。
而我們需要做的就是將舊的 application.js 改名，並且微調 manifest.js 及相關的 javascript_include_tag，就可以讓新舊程式同時運作。
到這邊，我已經可以安裝 hotwire-rails
bundle add hotwire-rails
rails hotwire:install
然後測試一下 Turbo & Stimulus 都跟舊的 JS 一起運作。
以上。
其他
雖然升級很難，但不用 webpacker 好嗎？
jsbundling-rails 也支援 webpack，而且更好。
另外，未來 Rails 的主軸將會擺在 importmap 及 jsbundling-rails，DHH 也詳述了背後的原因。
幹嘛要用 Hotwire？
其實繼續使用 Rails < 6 的開發方式並沒有太大的問題，例如 Stimulus 也有提供不需編譯的安裝方式，安裝之後就可以避免掉許多 SJR 替換 HTML 後需要重新初始化 JS 功能的情境。
雖然我對前端生態並不熟悉，甚至不知道將 JS 模組化的好處，但在目前的開發流程中，我發現比起 Stimulus 搭配 SJR 的組合技，使用 Hotwire 不只減少了請求數，並且維護性更佳。
幹嘛不用 CDN 安裝 hotwire 而要用 hotwire-rails gem？
雖然 Hotwire 的 Custom HTML Element <turbo-frame> 只是 plain HTML，但不使用 gem 的話，Rails controller 無法 respond_to format.turbo_stream，甚至在 *.turbo_stream.erb 的使用也會受限。
為何不用 importmap-rails？
其實我有安裝過 importmap-rails 了，也不難使用，但因為要等 Rails 7 才能使用 ActiveStorage/ActionText/ActionCable ，而我的項目暫時無法升級，所以只好放棄。
等未來 Rails 7 正式釋出時，我會考慮升級並轉換到 importmap-rails。
Latest comments (0)