本文 首发于 🌱 煎茶， 转载 请注明 来源。

若是新项目，在 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 依赖项。
• 它会安装 foreman gem，并为其生成一个配置文件。
• 它添加了一个 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

References

• @import ‘bootstrap/dist/css/bootstrap’;@import ‘bootstrap-icons/font/bootstrap-icons’;
• How to Install Bootstrap in Rails 7
• debug session doesn’t work with debug gem
• rails/jsbundling-rails
• rails/cssbundling-rails