Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 会抛出 Popper 不是构造函数

Question

所以

Bootstrap 4 Beta

已经出炉了……耶！然而，工具提示（和其他功能）的 Tether 被替换为

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' 
}),

我还在我的

import 'bootstrap'

文件中做了

main.ts

。

但是我现在遇到了另一个问题（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']
  })
  // ...
]

我们不要忘记

import

它在

main.ts

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

在

bootstrap": "^4.1.1"

中，无需导入

jquery

和

popper.js

，因为当单独导入“bootstrap”或 bootstrap 的插件时，这些插件已经包含在内。

注意，如果您选择单独导入插件，您还必须 安装导出加载程序

无需需要文件

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

中，我们在根目录中创建

vue.config.js

并放置如上所述的代码来注册新插件，但正如所说，不需要在

bootstrap": "^4.1.1"

中执行所有这些操作。

Bootstrap 的工具提示插件依赖于

popper.js

并且需要手动启用，因此您可以在使用工具提示元素的组件中执行如下操作：

<script>
  import $ from 'jquery';

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

Answer 4

我刚刚遇到了同样的问题，解决方案如下所述：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 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>

对我来说它有效。