Question

我是反应和webpack的新手，我发现错误我无法解决。我明白了：

bootstrap.min.js：6未捕获错误：Bootstrap的JavaScript需要 jQuery的

当我尝试在我的项目中导入bootstrap.js时，如下所示：

from collections import defaultdict

the_file = xlrd.open_workbook("4_test.xlsx")
the_sheet = the_file.sheet_by_name("Sheet1")

nested_dict = lambda: defaultdict(nested_dict)
_dict = nested_dict()

for row_index in range(1, the_sheet.nrows):
    expense = []
    travel = []
    name = str(the_sheet.cell(row_index, 0).value)
    for row_index_1 in range(1, the_sheet.nrows):
        if name == str(the_sheet.cell(row_index_1, 0).value):
            travel.append(str(the_sheet.cell(row_index_1, 1).value))
            expense.append(str(the_sheet.cell(row_index_1, 2).value))
            _dict[name]['travel'] = travel
            _dict[name]['expense']= expense

for name in _dict:
    print name + " to "+ ",".join(set(_dict[name]['travel'])) + " for " + ",".join(set(_dict[name]['expense']))

这是我的webpack.config.js

import React from "react";
import ReacrDOM from "react-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/css/light-bootstrap-dashboard.css";
import "./assets/css/demo.css";
import "font-awesome/css/font-awesome.min.css";
import "./assets/css/pe-icon-7-stroke.css";

import $ from "jquery";
import "bootstrap/dist/js/bootstrap.min";
import "./assets/js/bootstrap-checkbox-radio-switch";
import "./assets/js/chartist.min";
import "./assets/js/bootstrap-notify";
import "./assets/js/light-bootstrap-dashboard";
import "./assets/js/demo";

这是我的package.json：

var webpack = require('webpack');
var path = require('path');
var debug = process.env.NODE_ENV !== "production";

module.exports = {
    context: __dirname + "/src",
    devtool: debug ? 'inline-source-map' : null,
    entry: 'index.js',
    output: {
        path: path.join(__dirname, ''),
        filename: 'bundle.js'
    },
    resolve: {
        modules: ['node_modules', 'src'],
        extensions: ['.js']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=react-html-attrs,plugins[]=transform-class-properties,plugins[]=transform-decorators-legacy']
            },
            {test: /\.css$/, loader: "style-loader!css-loader"},
            {test: /\.less$/, loader: "style-loader!css-loader!less-loader"},
            {test: /\.gif$/, loader: "url-loader?mimetype=image/png"},
            {test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?mimetype=application/font-woff"},
            {test: /\.(ttf|eot|svg|jpe?g|png|gif)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader?name=[name].[ext]"},
            {
                test: /vendor\/.+\.(jsx|js)$/,
                loader: 'imports?jQuery=jquery,$=jquery,this=>window'
            },
        ]
    },
    plugins: debug ? [] : [
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.OccurrenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}),
            new webpack.optimize.AggressiveMergingPlugin(),
            new webpack.ProvidePlugin({
                $: "jquery",
                jquery: "jquery",
                "window.jQuery": "jquery",
                jQuery: "jquery"
            }),
        ]
};

我一直在谷歌搜索很多天，但我发现没有什么可以帮助我。请帮助我。

非常感谢

Answer 1

Bootstrap期望jQuery在浏览器中的全局范围，窗口对象上可用，因此您需要对其进行填充，webpack通过ProvidePlugin

实现这一点

引用他们的docs

此插件使模块在每个模块中都可用作变量。只有在使用变量时才需要该模块。示例：在每个模块中都可以使用$和jQuery，而无需编写require（“jquery”）。

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
})

您正在做的，但仅限于生产版本，

将webpack的插件定义更改为在调试模式下包含ProvidePlugin，您将在两个环境中都需要它。

Answer 2

我强烈建议您使用react-bootstrap代替bootstrap。 react-bootstrap并不依赖于jquery。它也更适合反应逻辑。

反应wirh Webpack + Jquery + bootsrap

2 个答案: