[英]Rails 7 Importmap Bootstrap
So, I've set up my rails 7 application by doing the following.因此,我通过执行以下操作设置了我的 Rails 7 应用程序。
rails new .
To add bootstrap I've implemented it with importmap (no webpacker) as following要添加引导程序,我已经使用 importmap(没有 webpacker)实现了它,如下所示
./bin/importmap pin bootstrap
which loaded these lines (I added the preload: true)加载了这些行(我添加了预加载:true)
pin 'bootstrap', to: https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js', preload: true
pin '@popperjs/core', to: 'https://ga.jspm.io/npm:@popperjs/core@2.11.2/lib/index.js', preload: true
then on my application.js, I added然后在我的 application.js 上,我添加了
import "bootstrap"
import "@popperjs/core"
and I was able to use the toast element by doing as follow我可以通过执行以下操作来使用 toast 元素
# toast_controller.js
import { Controller } from "@hotwired/stimulus"
import * as bootstrap from 'bootstrap'
// Connects to data-controller="toast"
export default class extends Controller {
connect() {
const toast = new bootstrap.Toast(this.element, {
delay: 5000,
animation: true,
autohide: true
})
toast.show()
}
}
and it was working well, But I started facing issues with bootstrap when trying to use the tooltip on my menu它运行良好,但是当我尝试使用菜单上的工具提示时,我开始遇到引导程序问题
# layout_controller.js
import { Controller } from "@hotwired/stimulus"
import * as bootstrap from 'bootstrap'
// Connects to data-controller="toast"
export default class extends Controller {
connect() {
[].slice.call(document.querySelectorAll('[data-bs-togle-secondary="tooltip"]'))
.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl, {placement: "right"})
})
}
}
the reason for it is because popperjs uses process.env.NODE_ENV
which doesn't exist since I didn't set up webpacker原因是因为 popperjs 使用了
process.env.NODE_ENV
因为我没有设置 webpacker 所以它不存在
so I had to do something ugly on my application layout and add it like this所以我不得不在我的应用程序布局上做一些丑陋的事情并像这样添加它
<script>
const process = {}
process.env = {}
process.env.NODE_ENV = "<%= Rails.env %>"
</script>
Is there a better approach/fix for this kind of issue?对于此类问题是否有更好的方法/修复方法?
At the moment of writing this 11/04/2022 there is not a clear solution for now and your mentioned approach with defining in const process in tag works, one issue with that is that with importmaps+turbolink approach it will rise "Uncaught SyntaxError: redeclaration of const process".在撰写这篇 2022 年 11 月 4 日的文章时,目前还没有明确的解决方案,您提到的在 const process in tag 中定义的方法有效,其中一个问题是使用 importmaps + turbolink 方法会出现“Uncaught SyntaxError: const 过程的重新声明”。
Probably for now it's best to just follow this thread https://github.com/rails/importmap-rails/issues/65 as this issue is mentioned in the comments there.可能现在最好只关注这个线程https://github.com/rails/importmap-rails/issues/65因为这个问题在评论中提到了。 One of the quick fixes mentioned there is similar to yours: https://github.com/rails/importmap-rails/issues/65#issuecomment-999939960 .
其中提到的快速修复与您的类似: https://github.com/rails/importmap-rails/issues/65#issuecomment-999939960 。 With a combined solution of yours and the one in the comments, it seems that this works best for now and there is no redeclaration error.
结合您的解决方案和评论中的解决方案,这似乎目前效果最好,并且没有重新声明错误。
<script>window.process = { env: { NODE_ENV: "#{Rails.env}" } }</script>
If the solution is introduced for this issue either on importmaps or popperjs side, then please update this comment or introduce a new answer.如果在 importmaps 或 popperjs 端针对此问题引入了解决方案,请更新此评论或引入新答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.