我收到此错误:
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"
}
}