无法让 Bootstrap 作为 jQuery 插件工作

Posted 2023-05-08

【中文标题】无法让 Bootstrap 作为 jQuery 插件工作

【英文标题】：Trouble getting Bootstrap working as a jQuery plugin

【发布时间】：2021-08-26 22:06:53

【问题描述】：

所以我正在使用一个大量使用模态的应用程序。我最近在前端做了一个大更新；迁移到使用 Laravel Mix 编译的资产，并将 Bootstrap 更新到版本 5。在大多数情况下，我们依赖于 data-bs-* 属性，但有一些地方模态是由事件触发的，我们在这里拥有麻烦。

Bootstrap documentation 说：

Bootstrap 5 设计为在没有 jQuery 的情况下使用，但我们仍然可以将我们的组件与 jQuery 一起使用。 如果 Bootstrap 在 window 对象中检测到 jQuery，它会将我们所有的组件添加到 jQuery 的插件系统中；这意味着您将能够执行 $('[data-bs-toggle="tooltip"]').tooltip() 来启用工具提示。我们的其他组件也是如此。

我已经确认这在浏览器加载脚本的传统环境中确实可以正常工作：

$("#foo").on("click", ()=>$("#exampleModal").modal("toggle"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"/>

<!-- Button trigger modal -->
<div class="container">
  <div class="row">
    <div class="col-6">
      <button id="foo" type="button" class="btn btn-primary">
        Launch demo modal
      </button>    
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

但是，我从以下代码中得到了旧的 Uncaught TypeError: edit.first().modal is not a function。我可以重写以使用 Bootstrap 的 JS 提供的新静态方法，但不需要重写。我确信根本原因是一个愚蠢的错误，因为我对所有这些新的 ES6 模块/导入内容缺乏经验。

window.$ = window.jQuery = require("jquery");
require("datatables.net");
require("datatables.net-bs4");
const pdfMake = require('pdfmake/build/pdfmake.js');
const pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.sprintf = require("sprintf-js").sprintf;
window.echarts = require("echarts");
import moment from "moment";
window.moment = moment;
import * as bootstrap from "bootstrap";

$(function () 
    // does not work
    $("table.datatable tbody").on("dblclick", "tr", function() 
        const edit = $(".editModal");
        edit.first().modal("show");
    );
    // works, as documented
    $("table.datatable tbody").on("dblclick", "tr", function() 
        const edit = $(".editModal");
        const modal = new bootstrap.Modal(edit.get(0));
        modal.show();
    );

);

【参考方案1】：

我通过将我的 JS 更改为如下所示来解决这个问题：

window.$ = window.jQuery = require("jquery");
// get rid of this
// import * as bootstrap from "bootstrap";
// and do this instead
require("bootstrap");
require("datatables.net");
require("datatables.net-bs4");
require("bootstrap-3-typeahead");
const pdfMake = require('pdfmake/build/pdfmake.js');
const pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.sprintf = require("sprintf-js").sprintf;
window.echarts = require("echarts");
import moment from "moment";
window.moment = moment;

我并不完全清楚import 和require 之间的区别，但它已经解决了问题，唯一的缺点是phpStorm 不想识别jQuery 元素上的popover() 方法。