Rails 7 已有项目引入 Bootstrap 3
若是新项目，在 Rails 7 之后直接使用 rails new test -j esbuild --css bootstrap 即可，若是已有项目，使用下面步骤引入：
主要步骤
安装 cssbundling-rails 管理 CSS
bundle add cssbundling-rails
./bin/rails css:install:bootstrap
做了以下几件事情：
- 它会创建
builds文件夹，并在清单文件中链接它 - 它会删除
application.css文件，因为它会生成自己的文件。 - 它添加了一个
package.json文件来存储 Javascript 依赖项。 - 它会安装
foremangem，并为其生成一个配置文件。 - 它添加了一个
bin/dev脚本来启动 rails 服务器，并监视 CSS 文件的任何更改。 - 它会创建特定于 Bootstrap 的
scss文件，该文件将被捆绑到一个application.css文件中。 - 它将安装
package.json文件中列出的所有 Javascript 依赖项。 - 它将 Bootstrap 字体路径附加到 assets 路径。
- 它将 Bootstrap Javascript 导入添加到
application.js文件中。 - 最后，它配置
build：css命令并运行它来构建application.css文件。
安装 jsbundling-rails 处理 JS 绑定
bundle add jsbundling-rails
./bin/rails javascript:install:esbuild
上述脚本做了这些事情：
- 它会检查
builds文件夹，但因为我们已经有了它，所以它不会做任何事情。 - 它将
javascript_include_tag添加到应用程序布局文件中。 - 它在 foreman 配置文件中添加一个任务，以监视任何 Javascript 更改。
- 它安装
esbuild打包器，并尝试构建 Javascript 代码。
疑难问题
$ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets
✘ [ERROR] Could not resolve "controllers"
app/javascript/application.js:3:7:
3 │ import "controllers"
│ ~~~~~~~~~~~~~
╵ "./controllers"
Use the relative path "./controllers" to reference the file "app/javascript/controllers/index.js".
Without the leading "./", the path "controllers" is being interpreted as a package path instead.
1 error
node:child_process:866
throw err;
^
Error: Command failed: /Users/cezar/Work/ror/bootstrap/node_modules/esbuild-darwin-arm64/bin/esbuild app/javascript/application.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets
at checkExecSyncError (node:child_process:828:11)
at Object.execFileSync (node:child_process:863:15)
at Object.<anonymous> (/Users/cezar/Work/ror/bootstrap/node_modules/esbuild/bin/esbuild:209:28)
at Module._compile (node:internal/modules/cjs/loader:1099:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47 {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 94418,
stdout: null,
stderr: null
}
Node.js v17.8.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
因为我们有一些 import maps 留下的代码，这与 jsbundling-rails gem 的工作方式相冲突。
因此，让我们解决这些问题。
修复安装
首先要做的是安装 turbo-rails 和 stimulus 包。
yarn add @hotwired/turbo-rails
yarn add @hotwired/stimulus
然后，我将调整 application.js 文件中的导入路径，并删除旧的刺激导入。
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
-import "controllers"
+import "./controllers";
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
-import { application } from "controllers/application"
-
-// Eager load all controllers defined in the import map under controllers/**/*_controller
-import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
-eagerLoadControllersFrom("controllers", application)
-
-// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
-// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
-// lazyLoadControllersFrom("controllers", application)
+import { application } from "./application";
在应用程序布局文件中，我将删除 javascript_importmap_tags 帮助程序，因为它不再需要。
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
- <%= javascript_importmap_tags %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
</head>
最后，我将取消链接其他 javascript 文件夹，只在清单中留下 builds 文件夹和 images 文件夹。
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
//= link_tree ../images
-//= link_tree ../../javascript .js
-//= link_tree ../../../vendor/javascript .js
//= link_tree ../builds
安装 Bootstrap3
以上命令默认会安装最新的 Bootstrap, 如果像我一样需要安装旧版本，则按照以下步骤：
首先安装 Bootstrap 3 和 jquery
yarn add bootstrap@3
yarn add jquery
之后创建一个 js 文件 app/javascript/add_jquery.js :
import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery
最后在 app/javascript/application.js 中引入即可：
...
import './add_jquery'
import "jquery/dist/jquery"
import "bootstrap/dist/js/bootstrap"
...
css 则是在 app/assets/stylesheets/application.bootstrap.scss 中写入：
+ @import 'bootstrap/dist/css/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
链接 debugger
以上操作后就可以使用 bin/dev 启动项目，会自动起来三个服务，这时如果使用 debugger 启动调试，就可以使用以下命令链接：
rdbg --attach