Rails 7、Bootstrap 5 和 importmaps 无需 Node.js

如何在不使用 Node.js 的情况下配置 Rails 和 Bootstrap

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我们的目标：移除 Node.js

和 Rails 社区中的许多其他人一样，我开始搭建全新的 Rails 7 项目，我需要重新学习（至少部分地）如何打包资源并分发它们。

我一直没能喜欢上 TailwindCSS，因此我通常会将我的 Rails 应用设置为默认使用 Bootstrap。

但我真正喜欢 Rails 7 的地方在于，它不仅让我摆脱了 webpack，还彻底摆脱了 nodejs。新的 importmaps 功能非常吸引我，只要我不需要打包我的 JavaScript，我就很乐意使用它。

我必须说，esbuild相比之下，它已经做得相当不错了，webpack简化了我们的生活，加快了流程，但只要我不需要打包，我就不想使用 package.json 文件，也不想让我的 Rails 应用程序依赖于 nodejs。

一个纯粹而简单的链轮 + importmaps 应用程序，没有 Foreman，bin/dev没有其他yarn build --watch任何东西。

Bootstrap 由两部分组成：CSS 和 JavaScript。因此，我想使用 importmaps 来处理 JavaScript 部分，并依靠 Sprockets 来从 SCSS 编译 CSS。

Rails 默认设置

默认情况下，Rails 7 提供了一个新选项--css=bootstrap，
但令我非常惊讶的是，该选项同时添加了jsbundling-rails、、cssbundling-rails和package.json。esbuild

与预期不符。不是我想要的。

如何在不使用 Node.js 的情况下配置 Rails 和 Bootstrap

默认设置并非我想要的，但我仍然可以达到目标，下面我将解释如何做到：

只需rails new myapp
这样设置即可，它会准确地设置我想要的工具：sprockets和importmaps。它还会自动为我设置 Stimulation 和 Turbo，这很棒，因为我大部分时间都在使用它们。

添加bootstrapgemsassc-rails并启用Gemfile 中的gem 功能。这将允许我们在不使用 Node.js 的情况下，从 SCSS 编译引导程序。

您可以直接在以下位置导入 Bootstrap 样式app/assets/stylesheets/application.scss：

// here your custom bootstrap variables...
@import "bootstrap";

CSS 部分就到此为止了。运行后rails assets:precompile就会生成你想要的内容。

对于 JavaScript 部分，我们需要做三件事：

• 通过添加以下内容，预编译 gem 自带的 bootstrap.min.js 文件：config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )

• 将编译后的资源固定到config/importmap.rb：

pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true

• 在您的代码中包含 Bootstrap app/javascript/application.js：

import "popper"
import "bootstrap"

我更喜欢这种方法，而不是锁定 CDN，因为这样可以避免 Bootstrap 版本不一致。

结论

这就是在 Rails 7 上无需使用 Node 即可完全运行 Bootstrap 所需的一切。

如果你喜欢这篇指南，可以在推特上关注我。