与 Webpack + Jquery + 引导程序react

IT技术 javascript jquery twitter-bootstrap reactjs webpack
2021-04-28 16:23:19

我收到此错误:

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

当我尝试在我的项目中导入 bootstrap.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";

这是我的 webpack.config.js

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"
            }),
        ]
};

这是我的 package.json:

{
  "name": "learn-react",
  "version": "1.0.0",
  "description": "for learning purpose only",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --content-base --inline --hot --port 3300"
  },
  "keywords": [
    "react",
    "learning"
  ],
  "author": "vidy hermes",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0",
    "redux-devtools-extension": "^2.13.0",
    "redux-logger": "^2.8.1"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "base-64": "^0.1.0",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.26.2",
    "file-loader": "^0.10.1",
    "font-awesome": "^4.7.0",
    "globalize": "^0.1.1",
    "history": "^4.5.1",
    "imports-loader": "^0.7.1",
    "jquery": "^3.2.1",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "moment": "^2.17.1",
    "path": "^0.12.7",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-redux": "^5.0.2",
    "react-redux-loading-bar": "^2.8.2",
    "react-router": "^3.0.2",
    "react-widgets": "^3.4.6",
    "redux": "^3.6.0",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8"
  }
}
2个回答

Bootstrap 期望 jQuery 在全局范围内可用,浏览器中的 window 对象,因此你需要填充它,webpack 通过 ProvidePlugin

引用他们的文档

该插件使module可用作每个module中的变量。仅当您使用变量时才需要该module。示例:无需编写 require("jquery") 即可在每个module中使用 $ 和 jQuery。

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

你在做什么,但只在生产版本中,

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

我强烈建议您使用react-bootstrap而不是 bootstrap。react-bootstrap 不依赖于 jquery。它也更适合react逻辑。