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因为这些插件将在“引导”或引导的插件单独进口来已经包括在内。

请注意，如果您选择单独导入插件，则还必须安装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开发人员，在 new 中vue-cli-3，我们vue.config.js在 root 中创建并放置像上面这样的代码来注册新插件，但如上所述，不需要在bootstrap": "^4.1.1".

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

<script>
  import $ from 'jquery';

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