通过 webpack 导入时，引导工具提示不适用于 jquery.slim

Posted 2023-05-08

【中文标题】通过 webpack 导入时，引导工具提示不适用于 jquery.slim

【英文标题】：Bootstrap tooltip not working with jquery.slim when importing via webpack

【发布时间】：2021-06-08 14:37:44

【问题描述】：

我通过 npm bootstrap 4.6.0 和 jquery 3.6.0 安装。

此代码正在运行：

import jQuery from "jquery/dist/jquery";
import "bootstrap/dist/js/bootstrap";
    
(function ($) 
    "use strict";   
    $("[data-toggle='tooltip']").tooltip()
)(jQuery);

此代码不起作用，错误为Uncaught TypeError: $(...).tooltip is not a function

请注意，唯一的区别是使用 jquery slim 代替 jquery。

import jQuery from "jquery/dist/jquery.slim";
import "bootstrap/dist/js/bootstrap";
    
(function ($) 
    "use strict";   
    $("[data-toggle='tooltip']").tooltip()
)(jQuery);

其他引导功能（例如折叠）甚至适用于 slim。

似乎由于某种原因引导程序无法加载某些功能，例如工具提示（也尝试使用 scrollspy，同样的问题）

我也尝试过console.log($.fn)，实际上使用 jquery slim 我找不到一堆函数...

【问题讨论】：

您是否安装了popper.js。我很确定工具提示仅适用于popper.js。 （确保它高于bootstrap.min.js）

您之前是否曾为 jquery 配置过 ProvidePlugin (WebPack)？将此配置为苗条。

@Gunnarhawk 我安装了 popper.js，并假设它包含在引导组件中（否则，第一个代码示例将不起作用）

@ChristianGollhardt 我的意思就是避免使用 ProvidePlugin。我需要在某些文件中获取 jquery，在其他文件中获取 jquery slim

您可以避免它，但必须接受这样一个事实，即损坏的模块（如 jquery 插件）将无法工作。 $(...).tooltip

【参考方案1】：

根据官方文档Tooltips Bootstrap：

工具提示依赖于第 3 方库 Popper.js 进行定位。您必须在 bootstrap.js 之前包含 popper.min.js 或使用包含 Popper.js 的 bootstrap.bundle.min.js / bootstrap.bundle.js 以使工具提示起作用！

所以你需要在你的 jQuery 和 Bootstrap 之间安装它。 或者你可以只安装已经包含 Popper.js 的 bootstrap.bundle.min.js 和 bootstrap.bundle.js。