反应wirh Webpack + Jquery + bootsrap
我是反应和webpack的新手，我发现错误我无法解决。 我懂了 ：
bootstrap.min.js：6 Uncaught Error：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" } }
我一直在谷歌搜索很多天，但我发现没有什么可以帮助我。 请帮助我。
非常感谢你
Bootstrap期望jQuery可以在全局范围，浏览器中的窗口对象上使用，因此你需要填充它，webpack通过ProvidePlugin实现这一点
引用他们的文档
该插件使模块在每个模块中都可用作变量。 只有在使用变量时才需要该模块。 示例：在每个模块中都可以使用$和jQuery，而无需编写require（“jquery”）。
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" })
你在做什么，但只在生产版本中，
更改您的webpack的插件定义，以便在调试模式下包含ProvidePlugin，您将在两个环境中都需要它。
我强烈建议你使用react-bootstrap而不是bootstrap。 react-bootstrap不依赖于jquery。 它也更适合反应逻辑。