36、Rails 7 前端资源打包与管理指南

Rails 7 前端资源打包与管理指南

1. 前端开发的演变与 Rails 7 的解决方案

早期，JavaScript 较为简单，可在 HTML 元素的 onclick 等属性中编写少量代码实现动态效果，但功能受限。后来，开发者将 JavaScript 代码放在外部文件中，通过 script 标签引入，不过仍有局限。随着时间推移，JavaScript 程序愈发复杂，需要引入多个文件，还出现了代码编译工具，对第三方库的依赖也增多，同时增加了 CSS、Sass 等资源以及性能优化任务。

Rails 7 提供了与以往不同的工具来协调这些构建任务，它明确划分了“Rails 负责的部分”和“前端工具负责的部分”，使 Rails 部分更加简单。在早期版本中，可能会使用 Sprockets 或 Webpacker 来配置和管理前端工具，这些工具配置复杂，且存在重复工作，还常使 JavaScript 和 CSS 的处理变得混乱。而 Rails 7 的工具允许选择外部的 JavaScript 和 CSS 构建器，只需将构建后的文件输出到指定位置，再通过 Propshaft 提供给浏览器，也可使用 importmap-rails 无需构建步骤来管理 JavaScript。

2. Yarn：依赖管理的核心

2.1 Yarn 的作用

Yarn 用于解决“程序依赖的所有模块的版本是什么”的问题，类似于 Ruby 的 Bundler 对 Ruby gems 的管理。所有受 jsbundling 支持的 JavaScript 打包工具（如 es