错误：Bootstrap的JavaScript需要jQuery，使用Webpack
我是webpack的新手，但我开始在我的一个项目中使用它来了解它。
我想在引导程序中使用jQuery，但是，当我启动应用程序时，我收到以下错误：
bootstrap.min.js？5802：6 Uncaught错误：Bootstrap的JavaScript需要jQuery
在我的webpack配置中，我定义了两个入口点，一个用于项目库，一个用于外部源，称为供应商，如jQuery，Bootstrap等。
在供应商中，我已经在jQuery库之后定义了Bootstrap库，但我无法摆脱错误。 我缺少的任何线索？
这是我的webapp配置：
import webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import autoprefixer from 'autoprefixer'; let node_dir = __dirname + '/node_modules'; export default { resolve: { extensions: ['', '.js', '.jsx'], alias: { 'jquery': node_dir + '/jquery/dist/jquery.js', 'jquery-validation': node_dir + '/jquery-validation/dist/jquery.validate.js', 'bootstrap': node_dir + '/bootstrap/dist/js/bootstrap.min.js' } }, debug: true, devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool noInfo: true, // set to false to see a list of every file being bundled. entry: { // must be first entry to properly set public path app: ['./src/webpack-public-path', 'webpack-hot-middleware/client?reload=true', './src/index'], vendors: ['jquery','jquery-validation','bootstrap'] }, target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test output: { path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`. publicPath: '/', filename: 'bundle.js' }, plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom) __DEV__: true }), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS. //template: 'src/index.ejs', template: 'src/index.html', minify: { removeComments: true, collapseWhitespace: true }, inject: true }), new webpack.ProvidePlugin({ $: "jquery", jquery: "jquery", "windows.jQuery": "jquery" }), new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity) ], module: { loaders: [ {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']}, {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'}, {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"}, {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}, {test: /\.ico$/, loader: 'file?name=[name].[ext]'}, {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']} ] }, postcss: ()=> [autoprefixer] }; 这是我的package.json文件：
{ "name": "dario-webapplication", "version": "1.0.0", "description": "Webapplication for Dario project", "engines": { "npm": ">=3" }, "scripts": { "preinstall": "node tools/nodeVersionCheck.js", "setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js", "remove-demo": "babel-node tools/removeDemo.js", "start-message": "babel-node tools/startMessage.js", "prestart": "npm-run-all --parallel start-message remove-dist", "start": "npm-run-all --parallel open:src lint:watch", "open:src": "babel-node tools/srcServer.js", "open:dist": "babel-node tools/distServer.js", "lint": "esw webpack.config.* src tools --color", "lint:watch": "npm run lint -- --watch", "clean-dist": "npm run remove-dist && mkdir dist", "remove-dist": "rimraf ./dist", "prebuild": "npm run clean-dist && npm run lint && npm run test", "build": "babel-node tools/build.js && npm run open:dist", "test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress", "test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress", "test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js", "test:watch": "npm run test -- --watch", "open:cover": "npm run test:cover && open coverage/index.html" }, "author": "Francisco Jose Parra Gonzalez", "license": "MIT", "dependencies": { "bootstrap": "3.3.7", "jquery": "2.1.4", "jquery-validation": "1.15.1", "object-assign": "4.1.0", "react": "15.3.0", "react-bootstrap": "0.30.3", "react-dom": "15.3.0", "react-redux": "4.4.5", "react-router": "2.6.1", "react-router-redux": "4.0.5", "redux": "3.5.2", "redux-thunk": "2.1.0" }, "devDependencies": { "autoprefixer": "6.4.0", "babel-cli": "6.11.4", "babel-core": "6.11.4", "babel-loader": "6.2.4", "babel-plugin-react-display-name": "2.0.0", "babel-plugin-transform-react-remove-prop-types": "0.2.9", "babel-preset-es2015": "6.9.0", "babel-preset-react": "6.11.1", "babel-preset-react-hmre": "1.1.1", "babel-preset-stage-1": "6.5.0", "babel-register": "6.11.6", "browser-sync": "2.14.0", "chai": "3.5.0", "chalk": "1.1.3", "connect-history-api-fallback": "1.2.0", "coveralls": "2.11.12", "cross-env": "2.0.0", "css-loader": "0.23.1", "enzyme": "2.4.1", "eslint": "3.2.2", "eslint-plugin-import": "1.12.0", "eslint-plugin-jsx-a11y": "2.0.1", "eslint-plugin-react": "6.0.0", "eslint-watch": "2.1.14", "extract-text-webpack-plugin": "1.0.1", "file-loader": "0.9.0", "html-webpack-plugin": "2.22.0", "isparta": "4.0.0", "mocha": "3.0.1", "mockdate": "1.0.4", "node-sass": "3.8.0", "npm-run-all": "2.3.0", "open": "0.0.5", "postcss-loader": "0.9.1", "prompt": "1.0.0", "react-addons-test-utils": "15.3.0", "redux-immutable-state-invariant": "1.2.3", "replace": "0.3.0", "rimraf": "2.5.4", "sass-loader": "4.0.0", "sinon": "1.17.5", "sinon-chai": "2.8.0", "style-loader": "0.13.1", "url-loader": "0.5.7", "webpack": "1.13.1", "webpack-dev-middleware": "1.6.1", "webpack-hot-middleware": "2.12.2", "webpack-md5-hash": "0.0.5" }, "keywords": [], "repository": { "type": "git", "url": "" } }
我终于通过在ProvidePlugin中添加一个新条目来消除错误：
jQuery:"jquery"
所以最后这个插件看起来像这样：
new webpack.ProvidePlugin({ $: "jquery", jquery: "jquery", "window.jQuery": "jquery", jQuery:"jquery" })
我把它留在这里以防万一其他人面临同样的问题。
使用Create React App可以像这样导入：
import 'jquery/src/jquery'; import '../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min';
注意：这是针对jQuery 3. *
您还可以添加Expose Loader包：
npm install expose-loader --save-dev
并在您的webpack入口点（即main.js ）中使用，如下所示：
import 'expose?$!expose?jQuery!jquery' // ...