忘了 webpacker, 舊版 Rails 앱 升級 jsbundling-rails + Hotwire
本篇升級方式的好處
希望能幫到像我一樣正在穩定開發但又想升級項目朋友們!
先升級至 레일 6
因為 jsbundling-rails 及 hotwire-rails 本身就限制至少 Rails 6,因此必須升級,但不需要安裝 webpacker,因此不會動到 JS & CSS 大幅降低了升級工作量,以我個人而言,從「太難了我放棄」到「兩天完成升級」🚀.
Rails 的升級步驟可參考 t27duck 撰寫的 How I upgrade Ruby on Rails
本篇文章的 Sample Code 在此 ,建議可以看我分開 commit 的結果比較清楚✌️,也可使用 git checkout 回溯渜試看
首先我
rails new rails_6_with_jsbundling_rails --skip-javascript 新建一個沒有任何 js 的 新項目 ,當然,也沒裝 webpacker.然後 加入一些 JS 以及 Admin 區塊 用來代表項目中已存在的功能.
接著 很單純的安裝 jsbundling-rails :
bundle add jsbundling-rails
rails javascript:install:esbuild
可以看到我已經有了 package.json,表示我可以透過
yarn add 安裝所有 노드 패키지👍.重點
foreman start -f Procfile.dev 開啟 Rails 서버 + 얀 빌드. <head>
...
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
...
</head>
但
application-thisisalonghash.js 原始碼卻是空白的,這是因為現在的 JS 진입점 已經改用 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 也詳述了背後的原因 .
幹嘛要用 핫와이어?
其實 其實 使用 使用 使用 rails <6 的 的 開發 方式 並 並 沒有 沒有 太 的 的 問題 問題 問題 問題 問題 問題 問題 也 也 也 有 有 提供 不需編譯的安裝方式, 安裝 之後 就 就 可以 避免 掉 許多 許多 許多 替換 html 後 需要 重新 初始化 初始化 初始化 js 的 情境 情境 情境...
雖然 雖然 對 對 我 生態 並 不 熟悉 熟悉 熟悉 熟悉 甚至 知道 知道 知道 將 將 將 將 將 將 將 js 模組化 的 好處 好處 好處 好處 好處 好處 目前 的 的 開發 流程 中 中 中 中 中 中 中 發現 比起 比起 자극 搭配 搭配 sjr 的 的 技 技 使用 使用 使用 hotwire 不 只 減少 了 了 請求 數 數 維護性 維護性 維護性更佳.
幹嘛不用 CDN 安裝 핫와이어 而要用 핫와이어 레일 보석?
Hotwire 의 Custom HTML Element
<turbo-frame> 일반 HTML, 但不使用 gem 的話, Rails 컨트롤러 無法 respond_to format.turbo_stream ,甚至在 *.turbo_stream.erb 使用也會受雖然為何不用 importmap-rails?
其實我有安裝過 importmap-rails 了,也不難使用,但因為要等 Rails 7 才能使用 ActiveStorage/ActionText/ActionCable , 了我項目暫
等未來 Rails 7 正式釋出時,我會考慮升級並轉換到 importmap-rails.
Reference
이 문제에 관하여(忘了 webpacker, 舊版 Rails 앱 升級 jsbundling-rails + Hotwire), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/hungmi/webpacker-rails-app-jsbundling-rails-hotwire-4908텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
