引導工具提示不是 function，波普爾不工作

Question

我正在嘗試在我的網站中使用單獨的引導模塊，而不是包含整個縮小文件。 但我嚇壞了，為什么這么復雜？ 還是我讓這件事復雜化了？

"devDependencies": {
  "exports-loader": "1.1.1",
  "webpack": "4.39.2",
  "uglify-js": "3.6.0",
},
"dependencies": {
  "bootstrap": "4.3.1",
  "jquery": "3.4.1",
  "popper.js": "1.14.7",
 }

/js 中的自定義 bootstrap.js

/* Tries:
import $ from 'jquery';
import 'popper.js';
import 'popper.js/dist/umd/popper.js';
import 'popper.js/dist/umd/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js'; */

window.jQuery = $;
window.$ = $;
global.$ = $;


/* BOOTSTRAP CUSTOM IMPORTS */
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip';
import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/tab';

這樣，我的代碼編譯成功，但在 chrome 控制台上出現此錯誤

Uncaught TypeError: $(...).tooltip is not a function

如果我在我的 webpack.config.js 中包含這個：

new webpack.ProvidePlugin({
  $: 'jquery/src/jquery',
  jQuery: 'jquery/src/jquery',
  'window.jQuery': 'jquery/src/jquery',
  Popper: ['popper.js', 'default'],
}),

工具提示錯誤消失了，但開始在其他庫上出錯，例如：

//Error on chrome console
Uncaught TypeError: $(...).mask is not a function

我的JS加載順序是：

LIBS (A WEBPACK MERGED FILE WITH ALL OTHER LIBS, LIKE JQUERY, MASKS, SLICK...)
BOOTSTRAP
POLYFILL

在互聯網上搜索我發現很多人都遇到了這個問題，但他們提出的解決方案對我不起作用。

拜托，有人可以幫助我嗎？

Answer 1

感謝您的回復。

I figured out what is going on, not really understanding why but, bootstrap imports with JQuery were causing conflicts in the use of jquery by plugins, so, I had to remove jquery imported from bootstrap file then include manually on another process of plugins file,像那樣：

/* BOOTSTRAP.js CUSTOM IMPORTS */
//removed jquery imports
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
...

webpack.config：

    //I had to maintain that provider
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: ['popper.js', 'default'],
    }),
    new MergeIntoSingleFilePlugin({
      files: {
        "js/libs.base.js": [
          //included jquery min file on merge of plugins
          path.join(source, 'src/libs/jquery', 'jquery-3.4.1.min.js'),
          path.join(source, 'src/libs/jquery-mask', 'jquery.mask.min.js'),
          ...

Answer 2

我認為這會有所幫助。

  // TOOLTIP PLUGIN DEFINITION
  // =========================

  var old = $.fn.tooltip

  $.fn.tooltip = function (option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.tooltip')
      var options = typeof option == 'object' && option
      if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
      if (typeof option == 'string') data[option]()
    })