别着急,坐和放宽
若是新项目,在 Rails 7 之后直接使用 rails new test -j esbuild --css bootstrap 即可,若是已有项目,使用下面步骤引入:
cssbundling-rails 管理 CSS做了以下几件事情:
builds 文件夹,并在清单文件中链接它application.css 文件,因为它会生成自己的文件。package.json 文件来存储 Javascript 依赖项。foreman gem,并为其生成一个配置文件。bin/dev 脚本来启动 rails 服务器,并监视 CSS 文件的任何更改。scss 文件,该文件将被捆绑到一个 application.css 文件中。package.json 文件中列出的所有 Javascript 依赖项。application.js 文件中。build:css 命令并运行它来构建 application.css 文件。jsbundling-rails 处理 JS 绑定上述脚本做了这些事情:
builds 文件夹,但因为我们已经有了它,所以它不会做任何事情。javascript_include_tag 添加到应用程序布局文件中。esbuild 打包器,并尝试构建 Javascript 代码。因为我们有一些 import maps 留下的代码,这与 jsbundling-rails gem 的工作方式相冲突。
因此,让我们解决这些问题。
首先要做的是安装 turbo-rails 和 stimulus 包。
然后,我将调整 application.js 文件中的导入路径,并删除旧的刺激导入。
在应用程序布局文件中,我将删除 javascript_importmap_tags 帮助程序,因为它不再需要。
最后,我将取消链接其他 javascript 文件夹,只在清单中留下 builds 文件夹和 images 文件夹。
以上命令默认会安装最新的 Bootstrap, 如果像我一样需要安装旧版本,则按照以下步骤:
首先安装 Bootstrap 3 和 jquery
之后创建一个 js 文件 app/javascript/add_jquery.js :
最后在 app/javascript/application.js 中引入即可:
css 则是在 app/assets/stylesheets/application.bootstrap.scss 中写入:
以上操作后就可以使用 bin/dev 启动项目,会自动起来三个服务,这时如果使用 debugger 启动调试,就可以使用以下命令链接:
bundle add cssbundling-rails
./bin/rails css:install:bootstrap
bundle add jsbundling-rails
./bin/rails javascript:install:esbuild
$ 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.
yarn add @hotwired/turbo-rails
yarn add @hotwired/stimulus
--- 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";
--- 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>
--- 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
yarn add bootstrap@3
yarn add jquery
import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery
...
import './add_jquery'
import "jquery/dist/jquery"
import "bootstrap/dist/js/bootstrap"
...
+ @import 'bootstrap/dist/css/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
rdbg --attach