[英]How to configure webpack for Bootstrap4 Popups and Tooltips (Popper.js)
我正在嘗試從Bootstrap 4 Alpha更新到Beta,並且正在使用Webpack!
到目前為止,我已經成功遷移了代碼以使其兼容,唯一的問題是我無法使工具提示和下拉菜單正常工作! 根據文檔,他們說這些功能取決於popper.js,並給出了有關如何配置i的示例!
我已經遵循了這些說明,但是現在當我想使用下拉菜單和工具提示時,出現TypeError: popper is undefined
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'
});
我無法弄清楚我在這里想念的是什么
更新
HTML代碼
<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>
這實際上對我有用:
let mix = require('laravel-mix');
let webpack = require('webpack');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.webpackConfig({
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
})
]
})
.version();
為了使用laravel webpack mix使用bootsrap4(測試版)彈出窗口,工具提示和下拉菜單,您必須將popper.js與bootstrap 4一起下載。
npm install bootstrap:4.0.0-beta popper.js --save
之后,您必須編輯resources / assets / js / bootstrap.js文件以包含popper.js:
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js/dist/umd/popper.js').default;
require('bootstrap/js/src/dropdown');
require('bootstrap/js/src/popover');
require('bootstrap/js/src/tooltip');
} catch (e) {
}
最后,您還必須編輯webpack.mix.js文件:
mix.autoload({
'jquery': ['$', 'window.jQuery', "jQuery", "window.$", "jquery", "window.jquery"],
'popper.js/dist/umd/popper.js': ['Popper', 'window.Popper']
});
經過一番調查,我發現問題不在於配置,而在於HTML代碼! 由於我是從Bootstrap 4 Alpha遷移到Beta的,因此我必須在下拉菜單中將href =“#currency-menu”更改為href =“#”,這樣看來
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.