Bootstrap（和 jquery）、webpack、rails - 没有完全集成

Posted 2023-05-09

【中文标题】Bootstrap（和 jquery）、webpack、rails - 没有完全集成

【英文标题】：Bootstrap (and jquery), webpack, rails - not integrating fully

【发布时间】：2021-08-21 08:23:18

【问题描述】：

第二次尝试通过 webpack 而不仅仅是从 CDN 加载 Rails 应用程序的引导程序（和 jquery）。 我在这里关注了这篇很棒的帖子：https://stevepolito.design/blog/rails-6-bootstrap-4-webpacker-tutorial/ - 我知道这引用了 bootstrap 4（我正在尝试使用最新的 bootstrap 5），我认为这可能是问题所在。 我已经调整 popper.js 被 @popper.js/core 替换（即“纱线添加”行）。

会发生以下情况： 我已经从引导网站中删除了示例代码，以检查工具提示、弹出框和模式是否有效。

工具提示可以使用，但它们的位置不起作用（它们都显示在顶部，而不是底部/右侧/左侧） modals 根本不起作用 - 我可以点击，但没有任何反应 弹出框有效，但只显示标题 - 不显示内容

javascript 控制台没有给出任何错误。但是，当我手动尝试 jquery.version 时，我得到一个“未捕获的 ReferenceError：jquery 未定义”。

这是我的 config/webpack/environment.js（我插入了 window.jquery 行）：

const  environment  = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin(
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        jquery: 'jquery/src/jquery',
        'window.jQuery': 'jquery/src/jquery',
        'window.Tether': "tether",
        Popper: ['popper.js', 'default'],
    )
)


module.exports = environment

这是我的 app/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require("jquery")

import "bootstrap"
import "../stylesheets/application";
document.addEventListener("turbolinks:load", function () 
    $(function () 
        $('[data-toggle="tooltip"]').tooltip()
        $('[data-toggle="popover"]').popover()
    )
)

这是我的 app/stylesheets/application.scss（样式似乎可以正常工作）：

@import '~bootstrap/scss/bootstrap'

任何帮助表示赞赏。我确实尝试过搜索 - 有很多关于类似问题的帖子，但我还没有找到与此问题相关的任何内容。

【参考方案1】：

要使 Bootstrap5 Rail 6 工作：

yarn add jquery
yarn add bootstrap@next
yarn add @popperjs/core

更改config/webpack/environment.js的内容：

const  environment  = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
   new webpack.ProvidePlugin(
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery',
      Popper: ['popper.js', 'default'],
   )
)
module.exports = environment

在app/assets/stylesheets/application.scss: 处导入引导 css：

 @import "bootstrap/scss/bootstrap";

然后将app/javascript/packs/application.js的内容设置为：

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require("jquery")
require("@popperjs/core")
import "bootstrap"
// import  Modal  from 'bootstrap'
import  Tooltip, Popover  from 'bootstrap'

jQuery(function () 
  // alert(123456)
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) 
    return new Tooltip(tooltipTriggerEl)
  )

  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) 
    return new Popover(popoverTriggerEl)
  )
)

成功的画面：

【讨论】：

感谢工作。除此之外，我真正想要实现的唯一一件事就是摆脱资产管道并将样式表作为一个包放在 javascript 文件夹中......我也会尝试这样做。