本篇升級方式的好處
- 降低了現存的 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。
Top comments (0)