我已经使用Exposure-loader设置jQuery全局变量，但出现错误“ Bootstrap的JavaScript需要jQuery”

Question

我使用webpack打包项目，但遇到了一个麻烦，那就是bootstrap不需要jquery。 我的webpack.config.js内容如下：

                //webpack
            var path = require('path')
            var webpack = require('webpack')
            var HtmlWebpackPlugin = require('html-webpack-plugin')
            var OpenBrowserWebpackPlugin = require('open-browser-webpack-plugin')
            //filio
            var copy = require('quickly-copy-file')
            var del = require('del')

            var ISDEV = function(){
                return process.env.NODE_ENV.trim() === 'development'
            }

            var ISPROD = function(){
                return process.env.NODE_ENV.trim() === 'production'
            }

            function getPlugins(){
                let plugins = [];

                if(ISDEV()){
                    plugins.push(new OpenBrowserWebpackPlugin({ url: 'http://localhost:8080/' }))
                }

                if(ISPROD()){
                    plugins.push(
                    new HtmlWebpackPlugin({
                        title: 'RECORD LIFE',
                        filename: '../index.html',
                        template: './client/html/index.html'
                    })
                    )
                }
                return plugins;
            }

            function writeAndDeleteFileAuto(){
            let copyFilePath = ''

            if (ISDEV()) {
                copyFilePath = 'client/html/index_dev.html'
            } 
            if (ISPROD()) {
                copyFilePath = 'client/html/index.html'
            }
            copy(copyFilePath, 'index.html', function(error) {
                if (error) {
                return console.error(error)
                }
            })
            if (ISPROD()) {
                del(['dist'])
            }
            }
            writeAndDeleteFileAuto()
            module.exports = {
                devtool : ISPROD() ? false : 'eval-source-map',
                entry : {
                    index:'./client/js/index.js'
                },
                output:{
                    path: path.join(__dirname,'/dist/'),
                    filename : 'index.js',
                    publicPath: '/dist/'
                },
                //webpackserver
                devServer:{
                    contentBase:"./",
                    inline:true,
                    hot: true,
                    port: 8080,
                },
                module:{
                    loaders:[
                    {
                        test: require.resolve('jquery'),  
                        loader: 'expose-loader?$!expose-loader?jQuery', 
                    },    
                    {
                        test:/\.js$/,
                        exclude: /node_modules/,
                        loaders: ['react-hot-loader', 'babel-loader?presets[]=react,presets[]=es2015']
                    },
                    {
                        test:/\.css$/,
                        loaders: ['style-loader','css-loader']
                    },
                    {   test: /\.eot$/, 
                        loader: "file-loader" 
                    },
                    {   test: /\.woff|\.woff2$/, 
                        loader: "url-loader?prefix=font/&limit=5000" 
                    },
                    {   test:  /\.ttf$/, 
                        loader: "url-loader?limit=10000&mimetype=application/octet-stream" 
                    },
                    {   test: /\.svg$/, 
                        loader: "url-loader?limit=10000&mimetype=image/svg+xml" 
                    }]
                },
                plugins: getPlugins()
            }

我得到了很多使用暴露加载程序插件的响应，但是并不能解决我的麻烦。当我想在引导程序Chrome中使用轮播时，向我显示错误Bootstrap的JavaScript需要jQuery。这些代码是我在引导程序中使用轮播功能：

            import React, { Component } from 'react';
        import 'bootstrap/dist/css/bootstrap.css';
        import 'bootstrap/dist/js/bootstrap.js';
        export default class BigEventCarousel extends Component {
            render() {
                return (
                    <div id='BigEventCarouselComponent' className='carousel slide'>
                        <ol className='carousel-indicators'>
                            <li data-target="BigEventCarouselComponent" data-slide-to="0" class="active"></li>
                            <li data-target="BigEventCarouselComponent" data-slide-to="1"></li>
                            <li data-target="BigEventCarouselComponent" data-slide-to="2"></li>
                        </ol>
                        <div className='carousel-inner' role='listbox'>
                            <div className="item active">
                                <img src="http://www.52desktop.cn/upimg/allimg/080517/1210bH114Z1LU.jpg" />
                                <div className="carousel-caption">

                                </div>
                            </div>
                            <div className="item">
                                <img src="http://pic3.bbzhi.com/xitongbizhi/gaoduibidujingmeigaoqingkuan/computer_kuan_193023_18.jpg" />
                                <div className="carousel-caption">

                                </div>
                            </div>
                            <div className="item">
                                <img src="http://pic3.bbzhi.com/xitongbizhi/gaoduibidujingmeigaoqingkuan/computer_kuan_193023_18.jpg" />
                                <div className="carousel-caption">

                                </div>
                            </div>
                            <a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span className="sr-only">Previous</span>
                            </a>
                            <a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span className="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                );
            }
        }

Answer 1

似乎您没有将jQuery添加到您的包中。 制作一个新文件，并将其保存在本地的jQuery中。 将其导入bootstrap.js文件之前。

import 'js/jquery.js';
import 'bootstrap/dist/js/bootstrap.js';