若是新项目,在 Rails 7 之后直接使用 rails new test -j esbuild --css bootstrap 即可,若是已有项目,使用下面步骤引入:
主要步骤
安装 cssbundling-rails 管理 CSS
CodeBlock Loading...
做了以下几件事情:
- 它会创建
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 绑定
CodeBlock Loading...
上述脚本做了这些事情:
- 它会检查
builds文件夹,但因为我们已经有了它,所以它不会做任何事情。 - 它将
javascript_include_tag添加到应用程序布局文件中。 - 它在 foreman 配置文件中添加一个任务,以监视任何 Javascript 更改。
- 它安装
esbuild打包器,并尝试构建 Javascript 代码。
疑难问题
CodeBlock Loading...
因为我们有一些 import maps 留下的代码,这与 jsbundling-rails gem 的工作方式相冲突。
因此,让我们解决这些问题。
修复安装
首先要做的是安装 turbo-rails 和 stimulus 包。
CodeBlock Loading...
然后,我将调整 application.js 文件中的导入路径,并删除旧的刺激导入。
CodeBlock Loading...
在应用程序布局文件中,我将删除 javascript_importmap_tags 帮助程序,因为它不再需要。
CodeBlock Loading...
最后,我将取消链接其他 javascript 文件夹,只在清单中留下 builds 文件夹和 images 文件夹。
CodeBlock Loading...
安装 Bootstrap3
以上命令默认会安装最新的 Bootstrap, 如果像我一样需要安装旧版本,则按照以下步骤:
首先安装 Bootstrap 3 和 jquery
CodeBlock Loading...
之后创建一个 js 文件 app/javascript/add_jquery.js :
CodeBlock Loading...
最后在 app/javascript/application.js 中引入即可:
CodeBlock Loading...
css 则是在 app/assets/stylesheets/application.bootstrap.scss 中写入:
CodeBlock Loading...
链接 debugger
以上操作后就可以使用 bin/dev 启动项目,会自动起来三个服务,这时如果使用 debugger 启动调试,就可以使用以下命令链接:
CodeBlock Loading...