javascript - Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 抛出 Popper is not a constructor

Question

所以 Bootstrap 4 Beta 已经发布了……是的!但是，Tether 已被 Popper.js 替换为工具提示(和其他功能)。我看到控制台中抛出的错误足够快，可以告诉我对 Popper.js 的更改:

Bootstrap dropdown require Popper.js

看起来很简单，我去更新了我的 webpack.config.js(可以看到整个配置 here )然后 Bootstrap 开始工作(我做的唯一改变是替换 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 documentation .我实际上找到了关于 Webpack 的部分，其中解释了如何正确安装它。关注Bootstrap - installing with Webpack文档，答案是简单地修改 webpack.config.js 如下:

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

不要忘记在 main.ts

中 导入它

import 'bootstrap';

瞧!我们恢复营业了:)