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

Question

我似乎无法 tooltips working in bootstrap 4 使用 npm webpack。

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

$ 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);

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

其他bootstrap javascript 功能类似于modals 等

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

Answer 1

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

require('bootstrap');

一切都在 official documentation 中得到了很好的解释。

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

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

Answer 2

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

解决方案是确保 bootstrap 的 jQuery 解析为我正在使用的版本，这是通过将此条目添加到 package.json:

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

目前只有 yarn 有此殊荣。
跟踪 npm 的类似功能 here。

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

$(...).tooltip is not a function using bootstrap 4 in npm webpack

twitter-bootstrap

npm

twitter-bootstrap-tooltip