Bootstrap 4 Beta使用Webpack 3.x導入Popper.js拋出Popper不是構造函數

Question

所以Bootstrap 4 Beta出來了......是的！ 但是Popper.js已被Popper.js替換為工具提示（和其他功能）。 我在控制台中看到一個錯誤，足以告訴我對Popper.js的更改：

Bootstrap dropdown require Popper.js

看起來很簡單，我去更新了我的webpack.config.js （ 這里可以看到整個配置）然后Bootstrap開始工作（我做的唯一改變是用Popper替換Tether）：

plugins: [
new ProvidePlugin({
  'Promise': 'bluebird',
  '$': 'jquery',
  'jQuery': 'jquery',
  'window.jQuery': 'jquery',
  'window.$': 'jquery',
  Popper: 'popper.js' 
}),

我還在main.ts文件中import 'bootstrap' 。

但是我現在有另一個問題（我沒有使用Tether），控制台中會拋出一個新錯誤：

Uncaught TypeError: Popper is not a constructor

如果我嘗試在Chrome中進行調試，我Popper作為對象加載（這就是Bootstrap停止抱怨的原因），如下面的打印屏幕所示。

最后包括我的所有代碼。 我使用Bootstrap工具提示和一個使用Aurelia和TypeScript構建的簡單自定義元素（以前用於以前的Bootstrap alpha 6和Tether）

import {inject, customAttribute} from 'aurelia-framework';
import * as $ from 'jquery';

@customAttribute('bootstrap-tooltip')
@inject(Element)
export class BootstrapTooltip {
  element: HTMLElement;

  constructor(element: HTMLElement) {
    this.element = element;
  }

  bind() {
    $(this.element).tooltip();
  }

  unbind() {
    $(this.element).tooltip('dispose');
  }
}

看起來我沒有正確導入Popper ，如果是這樣，那么使用Webpack 3.x實現這一目標的最佳方法是什么？

Answer 1

在瀏覽Bootstrap 4文檔時 。 我實際上找到了一個關於Webpack的部分，它解釋了如何正確安裝它。 在Bootstrap之后 - 使用Webpack文檔安裝 ，答案是簡單地使用以下內容修改webpack.config.js ：

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

讓我們不要忘記在main.ts import它

import 'bootstrap';

瞧！ 我們又回來了:)

Answer 2

如果您使用Webpack請執行以下操作：

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default; // pay attention to "default"
require('bootstrap/dist/js/bootstrap');

Answer 3

我剛遇到同樣的問題，解決方案在這里描述： https ： //github.com/FezVrasta/popper.js/issues/287

我的main.ts現在看起來像下面這樣：

import "jquery";
import Popper from "popper.js";

(<any>window).Popper = Popper;

require("bootstrap");

我必須運行npm install @types/requirejs --save來接聽require工作的電話。

編輯：我第一次完全錯過了這個，但文檔實際上有一個更好的方法來解決這個問題https://getbootstrap.com/docs/4.0/getting-started/webpack/

plugins: [
  ...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
    // In case you imported plugins individually, you must also require them here:
    Util: "exports-loader?Util!bootstrap/js/dist/util",
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    ...
  })
  ...
]

Answer 4

在bootstrap": "^4.1.1"無需導入jquery和popper.js因為當'bootstrap'或bootstrap的插件單獨導入時，這些插件已經包含在內。

請注意 ，如果您選擇單獨導入插件，則還必須安裝exports-loader

無需要求文件require('exports-loader?file ... '); 正如這里提到的那樣，只需安裝$ npm install exports-loader --save-dev

import 'bootstrap'; // Import all plugins at once

//
// Or, import plugins individually
//
// import 'bootstrap/js/src/alert';
// import 'bootstrap/js/src/button';
// import 'bootstrap/js/src/carousel';
// import 'bootstrap/js/src/collapse';
// import 'bootstrap/js/src/dropdown';
// import 'bootstrap/js/src/modal';
// import 'bootstrap/js/src/popover';
// import 'bootstrap/js/src/scrollspy';
// import 'bootstrap/js/src/tab';
// import 'bootstrap/js/src/tooltip';
// import 'bootstrap/js/src/util';

沒有必要做以下任何事情：

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
    ]
  }
}

我是一個vue.js開發人員，在新的vue-cli-3 ，我們在root中創建vue.config.js並放置上面的代碼來注冊新的插件，但是如上所述，沒有必要在bootstrap": "^4.1.1"執行所有這些操作bootstrap": "^4.1.1" 。

Bootstrap的工具提示插件依賴於popper.js ，需要手動啟用，因此您可以在使用tooltip元素的組件中執行以下操作：

<script>
  import $ from 'jquery';

  export default {
    mounted() {
      $('[data-toggle="tooltip"]').tooltip();
    },
  };
</script>

Answer 5

在ASP.net Core 2項目中添加以下腳本到主HTML文件（“_Layout.cshtml”文件）

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/popper.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

對我而言，這是有效的。