Bootstrap4、Webpack、导航栏切换按钮答案

【问题标题】：Bootstrap4, Webpack, Navbar toggle buttonBootstrap4、Webpack、导航栏切换按钮
【发布时间】：2020-05-21 11:11:55
【问题描述】：

我有一个使用 bootstrap 4.0.0-beta.2 的反应应用程序。我按照他们的网站Webpack-Bootstrap 中的描述在 webpack 中配置引导程序。

这是我的webpack.config.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: ["babel-polyfill",'./src/app.js'],
output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
},
module: {
    rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
    }, {
        test: /\.(scss|css)$/,
        use: [
            'style-loader',
            'css-loader',
            'sass-loader'
        ]
    }]
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    })
]
}

我按照 bootstrap 4.0.0-beta.2 的要求安装了 jQuery 和 popper。

我有一个使用引导导航栏的导航组件。见下文：

const Navigation = () => {
return (
    <nav className="navbar navbar-expand-lg navbar-dark fixed-top">
        <h1 className="navbar-brand">My App</h1>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div className="navbar-nav">
            <li><NavLink exact to="/" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Menu 1</NavLink></li>
            <li><NavLink exact to="/classement" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Menu 2</NavLink></li>
            <li><NavLink exact to="/calendrier" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Menu 3</NavLink></li>
            <li><NavLink exact to="/archives" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Archives</NavLink></li>
            </div>
        </div>
    </nav>
)
};

我的问题是切换按钮不起作用。当我在小型设备上时，会出现切换按钮，但是当我单击它时，什么也没有发生。我的菜单无法在小型设备上使用。

我阅读了有关此问题的一些回复，但所有解决方案都建议，当您使用 cdn 时，将 jQuery 脚本标签放在所有其他脚本之前。但我没有使用 cdn，我在我的项目中使用 Webpack 2 包含 Bootstrap。

在我的 webpack 条目中，我还尝试在所有其他文件之前添加 jQuery 文件，如下所示：

module.exports = {
entry: ["babel-polyfill",'script-loader!jquery/dist/jquery.min.js','./src/app.js'],
...

但问题仍然存在。

您对如何解决此问题有任何想法吗？谢谢。

【问题讨论】：

标签： jquery twitter-bootstrap reactjs webpack

【解决方案1】：

我终于找到了问题所在。在我的主文件 app.js 中，我只导入了 bootstrap 的样式部分：

import 'bootstrap/dist/css/bootstrap.min.css';

我还必须导入 bootstrap 的 js 部分

// Bootstrap
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';

所以使用 webpack 的 bootstrap 最终配置是：

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: ["babel-polyfill",'./src/app.js'],
output: {
  path: path.join(__dirname, 'public'),
  filename: 'bundle.js'
},
module: {
rules: [{
    loader: 'babel-loader',
    test: /\.js$/,
    exclude: /node_modules/
}, {
    test: /\.(scss|css)$/,
    use: [
        'style-loader',
        'css-loader',
        'sass-loader'
    ]
}]
},
plugins: [
new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
})
]
}

在主js文件（app.js）中：导入bootstrap的js部分和style部分

// Bootstrap
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

【讨论】：

【解决方案2】：

从“引导程序”开始：“^4.5.0”，

通过 npm/yarn 安装 Bootstrap 后

您只需要按以下方式导入引导程序

import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';

Webpack 中无需配置。导入 bootstrap JS 后，它会自动在 node_modules 中查找 jQuery。

你已经完成了！

【讨论】：