使用 Vite-Rails 進行現代化前端開發

在現代網頁開發中，前端資產的管理和構建工具扮演著至關重要的角色。傳統的 Rails 資產管道（Asset Pipeline）在處理複雜的 JavaScript 和 CSS 生態系統時，可能會顯得力不從心。為了解決這一問題，Vite 一個新興的前端構建工具，結合了其快速構建和開發服務器的特性，成為了 Rails 開發者的理想選擇。在這篇文章中，我們將探討如何在 Rails 項目中使用 Vite-Rails 進行現代化的前端開發。

什麼是 Vite-Rails？

Vite-Rails 是一個將 Vite 集成到 Rails 項目中的 gem，它旨在利用 Vite 的快速構建和熱模塊替換（HMR）功能，來提高開發者的生產力。Vite 是由 Vue.js 的作者尤雨溪（Evan You）開發的一個前端構建工具，專注於提供極快的開發服務器啟動時間和即時模塊熱替換，這些特性使其成為構建現代 Web 應用的理想選擇。

為什麼選擇 Vite-Rails？

快速構建：Vite 利用原生 ES 模塊和瀏覽器支持的特性，使得開發服務器啟動速度極快，並且能夠在大型項目中提供即時的模塊熱替換。
現代化開發體驗：Vite 的設計理念是針對現代前端開發環境，支持最新的 JavaScript 特性和前端框架（如 Vue、React 等）。
簡單集成：Vite-Rails 使得 Vite 可以輕鬆集成到現有的 Rails 項目中，讓開發者無需拋棄熟悉的 Rails 開發流程即可享受 Vite 帶來的性能提升。

如何在 Rails 中使用 Vite-Rails？

以下是如何在 Rails 項目中設置和使用 Vite-Rails 的步驟。

1. 安裝 Vite-Rails

首先，確保你的 Rails 項目使用的是 Rails 6 或更高版本，並且已經安裝了 Node.js 和 Yarn。然後，在你的 Gemfile 中添加 vite_rails gem：

gem 'vite_rails'

接著，運行 bundle install 來安裝這個 gem。

2. 初始化 Vite

運行以下命令來初始化 Vite 設置：

bundle exec vite install

這將會生成必要的 Vite 配置文件，包括 vite.config.ts 和 config/vite.json。

3. 配置 Vite

打開 vite.config.ts 文件，確保包含 vite-plugin-ruby 插件：

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'

export default defineConfig({
  plugins: [
    RubyPlugin(),
  ],
})

4. 設置 Rails 布局

更新你的 Rails 頁面布局文件 app/views/layouts/application.html.erb，添加 Vite 的 JavaScript 和 CSS 標籤：

<!DOCTYPE html>
<html>
<head>
  <title>MyApp</title>
  <%= vite_client_tag %>
  <%= vite_javascript_tag 'application' %>
  <%= vite_stylesheet_tag 'application' %>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
</head>
<body>
  <%= yield %>
</body>
</html>

5. 創建前端資產

在 app/frontend/entrypoints 目錄中創建一個 application.js 文件，並添加一些 JavaScript 代碼：

document.addEventListener('DOMContentLoaded', () => {
  console.log('Hello from Vite and Rails!');
});

6. 運行開發伺服器

運行以下命令來啟動 Rails 伺服器：

bundle exec rails server

在另一個終端窗口中運行 Vite 開發伺服器：

bundle exec vite dev

總結
通過將 Vite 集成到 Rails 項目中，開發者可以顯著提升前端開發的效率和體驗。Vite-Rails 提供了一個簡單而強大的工具，讓開發者可以利用現代化的前端技術來構建高性能的 Web 應用。希望這篇文章能夠幫助你了解並開始使用 Vite-Rails。