$(...).tooltip 不是在 npm webpack 中使用 bootstrap 4 的函数答案

【问题标题】：$(...).tooltip is not a function using bootstrap 4 in npm webpack$(...).tooltip 不是在 npm webpack 中使用 bootstrap 4 的函数
【发布时间】：2019-12-05 08:33:46
【问题描述】：

我似乎无法使用 npm webpack 让 tooltips 在 bootstrap 4 中工作。

我刚刚安装了这些节点供应商...

$ npm install jquery
$ npm install bootstrap
$ npm install popper.js --save

我要求这样的供应商......

global.jQuery = require('jquery/dist/jquery.min.js');

require('bootstrap/dist/js/bootstrap.js');
require('popper.js/dist/popper.min.js');

我已经为 bootstrap 和 popper.js 尝试了 dist 和 src。

我在所需的供应商之后像这样调用tooltips 函数。

(function ($) {

    // enable tooltips for everything
    $('[data-toggle="tooltip"]').tooltip();

})(jQuery);

我总是收到这个错误...

其他引导 javascript 函数的工作方式类似于 modals 等。

如果您想测试我的确切设置，download a test project here 只需运行 npm install，然后运行 npm run production 并查看 index.html 是否有错误。

【问题讨论】：

标签： twitter-bootstrap npm twitter-bootstrap-tooltip

【解决方案1】：

要么单独导入需要的插件，要么全部加载：

require('bootstrap');

official documentation 中的所有内容都得到了很好的解释。

还有很多插件依赖于$ 符号，所以最好也给这个起别名：

global.jQuery = global.$ = require('jquery');

【讨论】：

这太奇怪了，我从一开始就使用require('bootstrap');，只尝试了绝对路径进行调试。谢谢这现在有效。并为 jquery 别名技巧欢呼。
每个 npm 包都有所谓的“主脚本”，因此您通常只需按其名称导入即可。
在无数次尝试之后，global.jQuery 成功了。我不明白为什么需要这样做，因为 webpack 有 .autoProvidejQuery()... 但是，谢谢。

【解决方案2】：

我在这上面浪费了一整天，试图用各种 Webpack 插件加载 bootstrap v4-alpha.5 无济于事。
事实证明，在我切换到 preset-env 之后，bootstrap 开始“引入”它自己的 jQuery v3.6 版本（实际上是 Webpack，通过阅读 boostrap 的依赖项），这与我在 package.json 中的不同，因此只有jQuery 使用 bootstrap 的插件进行了修改（util、alert、button、carousel、tooltip、popover，...）。

解决方案是确保引导程序的 jQuery 解析为我正在使用的版本，这是通过将此条目添加到 package.json 来完成的：

  "resolutions": {
    "bootstrap/jquery": "2.2.4"
  }

目前只有yarn 授予此功能。
npm 的类似功能被跟踪 here。

【讨论】：