如何为Bootstrap4弹出窗口和工具提示(Popper.js)配置Webpack [英] How to configure webpack for Bootstrap4 Popups and Tooltips (Popper.js)

问题描述

我正在尝试将Bootstrap 4 Alpha更新为Beta，并且我正在使用Webpack！
到目前为止，我已经成功迁移了代码以使其兼容，唯一的问题是我无法使工具提示和下拉菜单正常工作！根据文档，他们说这些功能取决于popper.js，并给出了有关如何配置i的示例！
我已经遵循了这些说明，但是现在当我想使用下拉菜单和工具提示时，会得到TypeError: popper is undefined

I'm trying to update from bootstrap 4 alpha to beta and I'm using webpack!
Up to now I've successfully migrated my code to be compatible, the only thing is that i cant get Tooltips and Dropdowns to work! According to the docs they said that those features depends on popper.js and the gave an example on how to configure i to work!
I've follow those instruction but now when i want to use dropdowns and tooltips i get TypeError: popper is undefined

webpack.mix.js

webpack.mix.js

const path = require('path');
const webpack = require('webpack');
const { mix } = require('laravel-mix');

mix.webpackConfig({
    output: {
        path: path.join(__dirname, "/public"),
        publicPath: '/',
        chunkFilename: 'js/modules/[name].js'
    },
    plugins:[
        new webpack.ProvidePlugin({
            Moment: 'moment',
            'window.Moment': 'moment',
            Popper: ['popper.js', 'default'],
            popper: ['popper.js', 'default'],
            // 'window.Po': ['popper.js', 'default']
        }),
        new webpack.optimize.MinChunkSizePlugin({minChunkSize: 100000})
    ]
});

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.autoload({
    vue: [ 'Vue', 'window.Vue' ],
    // moment: ['window.moment', 'Moment'],
    jquery: ['$','jQuery','window.jQuery'],
    tether: ['window.Tether', 'Tether'],
    axios: ['axios','window.axios'],
    'cookies-js': ['Cookies']
});

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['vue','lodash','cookies-js','jquery','moment','tether','bootstrap','axios'])
    .sass('resources/assets/sass/app.scss', 'public/css')
    .js('resources/assets/js/admin.js', 'public/js')
    .sass('resources/assets/sass/admin.scss', 'public/css')
    .version()
    .browserSync({
        proxy: 'localhost:8000'
    });

我不知道我在这里想念什么

I cant figure out what I'm missing here

更新
HTML代码

UPDATE
HTML Code

<li class="nav-drop dropdown">
  <a href="#currency-menu" data-toggle="dropdown">{{ moneyCurrencyCode() }}</a>
  <ul id="currency-menu" class="list nav-drop-menu dropdown-menu">
      <li><a data-toggle="currency" data-currency="MZN" href="#">MZN</a></li>
      <li><a data-toggle="currency" data-currency="ZAR" href="#">ZAR</a></li>
      <li><a data-toggle="currency" data-currency="USD" href="#">USD</a></li>
      <li><a data-toggle="currency" data-currency="EUR" href="#">EUR</a></li>
  </ul>
</li>

推荐答案

经过一些调查，我发现问题不在于配置，而在于HTML代码！由于我是从Bootstrap 4 Alpha迁移到Beta的，因此我不得不在下拉菜单中将href =#currency-menu"更改为href =#"，这样看起来就遵循了

After some investigations I figured out that the problem wasn't with the configuration but with the HTML code! Since i was migrating from bootstrap 4 alpha to beta i had to change the href="#currency-menu" to href="#" on the dropdown toogle so it looked has following

HTML代码

<li class="nav-drop dropdown">
  <a href="#" data-toggle="dropdown">{{ moneyCurrencyCode() }}</a>
  <ul id="currency-menu" class="list nav-drop-menu dropdown-menu">
      <li><a data-toggle="currency" data-currency="MZN" href="#">MZN</a></li>
      <li><a data-toggle="currency" data-currency="ZAR" href="#">ZAR</a></li>
      <li><a data-toggle="currency" data-currency="USD" href="#">USD</a></li>
      <li><a data-toggle="currency" data-currency="EUR" href="#">EUR</a></li>
  </ul>
</li>

这篇关于如何为Bootstrap4弹出窗口和工具提示(Popper.js)配置Webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！