Rails 7 导入映射 Bootstrap

Question

那么，我按照以下步骤设置了我的 Rails 7 应用程序。

rails new .

为了添加Bootstrap，我已使用importmap（没有webpacker）进行了以下实现

./bin/importmap pin bootstrap

加载了这些行（我添加了preload：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

然后在我的application.js文件中，我添加了以下内容：

import "bootstrap"
import "@popperjs/core"

我按照以下步骤成功使用了提示框组件：

 # 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()
  }
}

一开始我们的代码工作得很好，但是当我尝试在我的菜单上使用提示工具时遇到了Bootstrap的问题。

# 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"})
      })
  }
}

原因是因为 PopperJS 使用了 process.env.NODE_ENV，但没有设置 webpacker，所以它不存在。因此，我在我的应用程序布局上做了一些丑陋的东西，并像这样添加了它。

<script>
  const process = {}
  process.env = {}
  process.env.NODE_ENV = "<%= Rails.env %>"
</script>

针对这种问题，是否有更好的解决方案/修复方法？

- dandush03

Answer 1

截至撰写本文的日期11/04/2022，目前还没有明确的解决方案，您提到的在标签中定义const process的方法可以使用，但其中一个问题是，在使用importmaps+turbolink方法时，会出现“未捕获的SyntaxError：重复声明const process”的错误。

可能现在最好的方法是只需关注此线程https://github.com/rails/importmap-rails/issues/65，因为该问题在那里的评论中有提及。其中提到的一种快速修复方法类似于您的方法：https://github.com/rails/importmap-rails/issues/65#issuecomment-999939960。结合您的解决方法和评论中的方法，似乎这是目前最好的解决方案，并且不会出现重复声明的错误。

<script>window.process = { env: { NODE_ENV: "#{Rails.env}" } }</script>

如果在引用映射或弹出窗口库的一方解决了这个问题，请更新此评论或引入新的答案。

- Maris Rucko