Bootstrap JS 无法与 Rails Importmap 一起使用

Question

我有一个 Rails 7 应用程序，正在使用 Importmap。我通过gem和文档加载 Bootstrap JS ，所以我的 config/importmap.rb 有：

pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true

配置/初始化器/assets.rb

Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )

应用程序.js

import 'popper'
import * as bootstrap from 'bootstrap'
document.addEventListener("turbo:load", function() {
  new bootstrap.Popover(document.getElementById('example'))
})

像通过数据属性激活的下拉菜单这样的东西工作得很好，但我的自定义 JS 给出了错误：Uncaught TypeError: bootstrap.Popover is not a constructor

Answer 1

如何初始化 Popper（工具提示）importmaps

你们非常接近。我更改了您的 bootstrap 导入语句application.js，并修改了pinimportmaps 中的语句以与文档（下面链接）保持一致。一切正常。

应用程序/javascripts/application.js

// app/javascripts/application.js
import "@popperjs/core";
import "bootstrap";

document.addEventListener("turbo:load", function () {
  // This code is copied from Bootstrap's docs. See link below.
  var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
  );
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
});

请注意，内部代码来自Bootstrap 的文档，并将初始化屏幕上的所有工具提示。

配置/导入映射.rb

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

# Note: Everything above was added by default. Added these two lines:
pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@popperjs/core", to: "popper.js", preload: true

最后两行与您所拥有的略有不同，但是从gem 的 docs复制粘贴的。

正如您所做的那样，我还必须添加以下内容：

配置/初始化器/assets.rb

# ... default code above ...
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )