我们得说实话。尽管在Showmax，我们为客户维护一个平台，因此我们非常关注代码质量、重构和保持最新的技术，但我们用Ruby on Rails框架构建的全栈应用程序的前端部分却被忽略了。主要原因是什么？对现代JavaScript世界的恐惧。
几年前，有一个关于每个月都有一个新的 "最佳 "JavaScript框架发布的备忘录。前端工具的发展也很快，虽然今天我们有很棒的构建工具，如rollup、es_build、parcel和vite，但当Rails 5.1引入webpacker（一种在Rails应用中轻松使用webpack的方法）时，作为主要关注后台的工程师，我们真的没有急于使用它。因此，我们在这里--运行Ruby on Rails 6和7的应用程序，仍然使用sprockets作为捆绑和构建生产资产的方式。
在Rails 7中，默认的前端方法已经改为import-map，但也可以使用传统的javascript捆绑方法。最重要的是，webpacker项目已经退役了。现在，可怕的webpacker已经退出了，这为我们开始现代化的前端工具提供了新的机会。
最近，Vite.js已经成为一个非常受欢迎的下一代前端工具，这也是理所当然的。Vite 3公告强调了Vite对当前生态系统的影响，Laravel PHP框架默认使用它，Vite-rubygem也被强调。在这篇文章中，我们将探讨如何以及为什么要在前端完全由sprockets处理的应用程序中引入Vite的第一个小步骤。
原因
让我们重新审视一下为什么要在我们的应用程序中引入Vite的问题：
- 首先，它是一个现代的前端工具，最终我们将能够用它完全取代链轮。
- 其次，由于有了Vite-rubygem，它很容易集成（正如我们稍后将看到的）。
- 第三，只要在我们的应用程序中引入Vite-ruby并更新一个简单的配置文件，我们就可以在任何文件变化时立即开始享受我们服务器端渲染应用程序的实时重载。
- 最后，Vite和sprockets可以毫无问题地共存，这为我们在多个阶段将前端迁移到Vite提供了机会。
你对这个想法感兴趣吗？那就让我们来看看如何做吧。
如何做
由于有了Vite-rubygem，将Vite集成到我们使用sprockets的Rails应用程序中非常容易。在开始之前，我们先检查一下依赖性：
- Ruby 2.7
- Node.js ^14.18.0 || >=16.0.0
如果你的环境符合最低要求，你在安装Vite时应该不会遇到任何问题。
让我们开始安装Vite-ruby作为第一步。在你的Gemfile中添加vite_rails ：
gem 'vite_rails'
然后安装gem。在你的终端运行：
bundle install
bundle exec vite install
Vite-ruby自动将Vite安装到了我们的应用程序中，恭喜你！我们的应用程序已经安装完毕。那么有什么变化呢？让我们通过运行git status看看：
modified: .gitignore
modified: Gemfile
modified: Gemfile.lock
new file: Procfile.dev
new file: app/frontend/entrypoints/application.js
new file: bin/vite
modified: config/initializers/content_security_policy.rb
new file: config/vite.json
new file: package-lock.json
new file: package.json
new file: vite.config.ts
有趣的部分是新的app/frontend 目录和其中的文件application.js ，它包含了如何使用 ruby-vite 的基本例子。另外，content_security_policy已经改变，允许热重载我们的文件。但我们不需要担心这个问题--婴儿的步骤，记得吗？创建package.json 文件是因为我们的服务器端渲染应用程序到现在为止确实没有使用任何npm包。另外，请注意配置文件vite.config.ts 和config/vite.json ，因为我们将在后面的工作中使用它们。
如果你使用的是.erb文件，vit-ruby标签助手应该会自动注入你的application.html.erb 。我们使用的是slim，默认情况下标签没有被注入，所以我们需要手动添加它们。Vite-ruby带来了3个新的vite帮助器。vite_javascript_tag,vite_typescript_tag, 和vite_stylesheet_tag 。这些帮助程序使你能够创建与sprocket捆绑程序平行的捆绑程序，这样你就可以逐步迁移你的前端了。
在 "为什么 "一节中，我们把 "实时重载 "作为在我们的应用程序中添加Vite的动机之一。为了实现这一点，我们需要使用另一个辅助工具 -vite_client_tag 。事实上，如果我们还不想通过Vite开始捆绑javascript和css，我们可以只对我们的application.html.slim 文件使用这一个帮助器，而忘记其他的。
在这一点上，我们仍然没有完成。虽然现在热重载对Vite管理的资产是有效的，但我们需要处理链轮资产以及Ruby文件的变化时的实时重载问题。幸运的是，Vite的扩展生态系统丰富而简单，所以我们可以直接设置Vite-plugin-full-reload库来为我们完成这项工作。
在你的终端运行：
npm i -D vite-plugin-full-reload
并如README所说，在vite.config.ts 文件中配置该插件。README建议在对config/routes.rb 和app/views/**/* 的修改中设置重载。对于我们的用例，我们决定在应用程序文件夹内的任何文件的任何变化上重新加载：
FullReload(['config/routes.rb', 'app/**/*'], { delay: 100 }),
如果需要，我们可以随时调整这一设置。现在一切都准备好了，让我们来运行我们的服务器。我们需要运行2个服务器：启用实时重载的Vite服务器和我们的标准rails服务器。在一个终端窗口运行：
bin/vite dev
在另一个终端上运行：
bin/rails server
打开localhost:3000 ，然后享受每次在你的应用程序文件中进行修改时的实时重载
