jquery - 尽管安装了 JQuery 和 Bootstrap，但工具提示仍不起作用

Question

存在看似类似的问题 here和 here但提供的答案并不能解决我的情况。

我的服务器上有一个 Node/Express/Webpack 堆栈，我在其中使用 npm 安装 Bootstrap 4 alpha 6 以及工具提示功能所需的依赖项 tether.js。在我的主 JS 文件中，如 webpack 配置中所定义，我使用以下代码片段导入了 tether 并初始化了 Bootstrap 工具提示函数:

import "tether";

和:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

然后，在我的 index.hbs (我使用 Handlebars 来渲染我的页面)中，我有以下实现工具提示的代码片段:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip on top">
    Tooltip on top
</button>

脚本编译成功，没有任何错误或警告。但是，当在浏览器中加载页面时，我收到错误消息:tooltip is not a function...。这不应该发生，对吧？我可以确认 JQuery 工作正常，因为上面所示的一个初始化工具提示正下方的以下代码片段正在渲染，没有任何问题:

$('p#some').html('from jquery');

如下所示，JQuery 和 Tether 插件以及 Tooltip 插件均已在我的 webpack.config.js 文件中启动:

plugins: [
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    new ExtractTextPlugin({ filename: "../../public/dist/main.min.css" }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Tether: "tether",
      "window.Tether": "tether",
      Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
      Button: "exports-loader?Button!bootstrap/js/dist/button",
      Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
      Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
      Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
      Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
      Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
      Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
      Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
      Util: "exports-loader?Util!bootstrap/js/dist/util",
    }),
    new webpack.LoaderOptionsPlugin({ postcss: [autoprefixer] }),
  ]

项目文件可作为内部存储库 here 提供如果有帮助的话。

Answer 1

几个问题，因为我自己也遇到过类似的问题。

1) 您需要在 webpack.config.js 的插件部分中提供对 popper.js 的引用；

Popper: ['popper.js', 'default'],

2)在你的主js中，导入所需的插件；

import 'bootstrap/js/dist/tooltip';

更多信息请点击:Bootstrap 4 - Webpack install