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

Posted 2023-02-22

【中文标题】Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 抛出 Popper 不是构造函数

【英文标题】：Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor

【发布时间】：2018-01-20 14:34:20

【问题描述】：

所以Bootstrap 4 Beta 出局了……是的！然而，Tether 已被 Popper.js 替换为工具提示（和其他功能）。我看到控制台中抛出的错误足够快，可以告诉我更改为Popper.js：

Bootstrap dropdown require Popper.js

看起来很简单，我去更新了我的webpack.config.js（可以看到整个配置here），然后 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 实现这一目标的最佳方法是什么？

【参考方案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.tsimport它

import 'bootstrap';

瞧！我们又开始营业了:)

【讨论】：

大家好！我怎样才能使用 aurelia.json 做同样的事情？

@JhonatasKleinkauff 此处的问题仅针对 WebPack，但对于 Aurelia-CLI，您是否尝试过与之前的 Tether 导入类似的方法：aurelia-cli-to-use-with-bootstrap-4

@ghiscoding 是的，我知道，这就是我要找的东西***.com/questions/45816118/…

@JhonatasKleinkauff 与之前对 Tether 的回答非常相似，我看到的唯一区别是使用 UMD 路径。无论如何，很高兴您找到了 CLI 的答案 :)

【参考方案2】：

如果你正在使用 Webpack 这样做：

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

【参考方案3】：

在bootstrap": "^4.1.1" 中无需导入jquery 和popper.js，因为单独导入'bootstrap' 或bootstrap 的插件时，这些插件已经包含在内。

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

不需要像here 提到的那样需要文件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 的 tooltip 插件依赖于popper.js 并且需要手动启用，所以您可以在使用 tooltip 元素的组件中进行如下操作：

<script>
  import $ from 'jquery';

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

【参考方案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",
    ...
  )
  ...
]

【讨论】：

你的解决方案一开始没有用，最大的原因是我必须从webpack.config.js 中完全删除 Popper。您能否在回答中提及它，以便我接受。

直接在 webpack.config 中找到了如何正确执行此操作，实际上我在他们的入门部分浏览新的 Bootstrap 4 文档时很幸运地找到了它。所以我实际上回答了我自己的问题，但仍然支持你的问题，因为这有助于我理解真正的问题。再次感谢。

【参考方案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>

对我来说它正在工作。