1

因此，我通过执行以下操作设置了我的 rails 7 应用程序。

rails new .

要添加引导程序，我已经使用 importmap（无 webpacker）实现了它，如下所示

./bin/importmap pin bootstrap

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

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

它运行良好，但是当我尝试使用菜单上的工具提示时，我开始遇到引导问题

# 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>

这类问题有更好的方法/解决方案吗？

4

0 回答 0