Frytea's Blog
·
Rails 7 已有项目引入 Bootstrap 3
💡
原文中文，约4900字，阅读约需12分钟。
📝
内容提要
在 Rails 7 中，新项目可直接使用 esbuild 和 Bootstrap。已有项目需安装 cssbundling-rails 和 jsbundling-rails，配置文件以处理 JavaScript 和 CSS 依赖，确保路径正确。最后启动项目并进行调试。
🎯
关键要点
- 在 Rails 7 中，新项目可直接使用 esbuild 和 Bootstrap。
- 已有项目需安装 cssbundling-rails 和 jsbundling-rails。
- 安装 cssbundling-rails 后会创建 builds 文件夹并链接，删除 application.css 文件，添加 package.json 文件。
- 安装 jsbundling-rails 后会检查 builds 文件夹，添加 javascript_include_tag 到应用程序布局文件。
- 解决 esbuild 构建错误需使用相对路径导入控制器。
- 安装 turbo-rails 和 stimulus 包以修复导入路径问题。
- 在应用程序布局文件中删除不再需要的 javascript_importmap_tags。
- 安装 Bootstrap 3 和 jQuery 的步骤，创建 add_jquery.js 文件并在 application.js 中引入。
- 使用 bin/dev 启动项目并链接 debugger 进行调试。
❓
延伸问答
如何在 Rails 7 中为已有项目引入 Bootstrap 3？
需要安装 cssbundling-rails 和 jsbundling-rails，配置相关文件后，启动项目进行调试。
安装 cssbundling-rails 后会发生什么？
会创建 builds 文件夹，删除 application.css 文件，并添加 package.json 文件来存储 JavaScript 依赖项。
如何解决 esbuild 构建错误？
使用相对路径导入控制器，例如将 'controllers' 改为 './controllers'。
在 Rails 7 中如何安装 Bootstrap 3 和 jQuery？
使用命令 'yarn add bootstrap@3' 和 'yarn add jquery'，然后在相应的 JavaScript 文件中引入。
如何启动 Rails 7 项目并进行调试？
使用命令 'bin/dev' 启动项目，并使用 'rdbg --attach' 进行调试。
在 Rails 7 中如何处理 JavaScript 依赖？
安装 jsbundling-rails 后，会检查 builds 文件夹并添加 javascript_include_tag 到应用程序布局文件。
➡️
