Rails 前端打包工具组合 (2022版)

..

发现 Rails 的前端打包(build)工具已经到了眼花缭乱的地步，文件也没写如何搭配，老专案又该何去何从? 我做了一个排列组合分析看看。

会有这么多情况，主要是因为

1. Webpacker 被 Rails 官方 deprecated 了，这个与 webpack 深度绑一起的 gem 可能因为维护成本太高，Rails 官方不再维护了，死在 v6.0.0.rc.6。Webpacker 版号大 webpack 一号，webpacker v6 是搭配 webpack v5。webpacker v5 是搭配 webpack v4…
2. sassc-rails 采用的 LibSass 核心被 Sass 官方 deprecated 了，官方改用 Dart 来实作。我不是 Sass 专长，不了解升级 Dart 版 SaSS 是否要紧，感觉可以拖一拖等有需要再处理。

DHH 为了想要避免初学者安装和了解 Node.js 世界，所以默认提供的是不需要额外装 Node.js 的 importmap 方案，以及新出一个 dartsass-rails gem 来升级 Dart Sass。

但如果需要真的上线，进一步还是得拥抱 Node.js 世界的 jsbuindling-rails 方案了。

CSS 部分	Sass 部分	JS 部分	要求Node.js	短评
Sprockets	sassc-rails	Sprockets	no	传统 Rails 作法，无法处理 Vue.js/React 编译需要
Sprockets	sassc-rails	Webpacker	yes	Rails 6 时代 DHH 建议的方案: css/image 留在 Sprockets，js 改用 webpack。
Webpacker	同左	同左	yes	一度很多人建议把 Sprockets 都拆了换成 Webpacker…
Sprockets	sassc-rails	importmap	no	DHH 给的新 Rails 7 默认方案
Sprockets	sassc-rails	jsbuindling	yes	我目前的推荐方案
Sprockets	sassc-rails + sass-embedded	Sprockets	no	有人 Hack sassc 升级成 dart-sass ，可以无痛从 sassc 升级
Sprockets	sassc-rails + sass-embedded	jsbuindling	yes	同上类似，如果需要JS编译
Sprockets	dartsass-rails	importmap	no	DHH 给的升级 Dart Sass 过渡方案
Sprockets	dartsass-rails	jsbuindling	yes	同上类似，如果需要JS编译
Sprockets	cssbundling	jsbuindling	yes	DHH 发现这种组合时，可以把 Sprockets 换成精简后的 Propshaft
Propshaft	dartsass-rails	jsbundling	yes	应该没人这样用，dartsass-rails gem 想解决是 Sprockets 搭配 Dart Sass 的场景
Propshaft	cssbundling	jsbuindling	yes	这是 DHH 给的 Rails 前端终极方案: 都外包给 Node.js 编译打包，最后给 Propshaft 整合进 Rails 即可
Vite Ruby	同左	同左	yes	完全不用 Rails 给的前端方案，全部改用 Vite 处理

以下再个别说明一下

• Sprockets 是 Rails 历史最久的打包编译 CSS/JS 工具，而且最近还有在释出更新。不过在 Node.js 新世界后，其编译功能追不上需求了，无法处理 React 和 Vue.js 需要的编译任务。
• sassc-rails gem (等同于 sass-rails gem 两者一样)，是搭配 Sprockets 用的，核心是已被 deprecated 的 LibSass
• dartsass-rails gem，也是搭配 Sprockets 用的，核心换成 Dart Sass，但根据文件有 Troubleshooting，升级会有一些麻烦要处理
• sass-embedded，竟然有人Hack sassc gem，把里面的 LibSass 换成 Dart 版本…. 看起来完全无痛升级，比 dartsass-rails 简单
• Importmap 是 Rails 直接利用浏览器的 JavaScript modules 功能，因此就不需要处理 JS 编译了。不过因为浏览器支援还不好关系，显然还不能真的拿来上 Production 使用。
• cssbundling-rails 和 jsbundling-rails 都是把编译打包任务，全都交给 Node.js 世界处理，最后丢出一个 build 好的档案给 Asset Pipeline (Sprockets或Propshaft) 整合进 Rails。
  • jsbundling 可以搭配 esbuild, webpack 或 rollup.js
• Propshaft 是个阳春精简版的 Sprockets，没有编译和打包 css/js 的功能，只剩下最基本和 Rails 整合的任务

我的想法:

• 现阶段 Sprockets 继续用，有用 Vue.js/React 就再搭配 jsbundling-rails + esbuild 处理
• 之前的 Webpacker code 得拆除，这死路了。得改成用 jsbundling-rails + esbuild 处理
• 若有需要升级 Dart Sass，我会尝试用 sass-embedded 看看，不行再试 dartsass-rails gem。真不行有需要再全面换 cssbundling-rails 以及 Sprockets 可换成 Propshaft (以上迁移成本由小到大)
• Vite Ruby 蛮有趣的，Vite 工具很厉害。但这也等于都不用 Rails 提供的前端方案，这可能比较适合重度前端开发，有专属 F2E 的 Rails 团队使用。