错误:Bootstrap的JavaScript需要jQuery,使用Webpack
发布时间:2020-12-18 00:20:19 所属栏目:安全 来源:网络整理
导读:我是webpack的新手,但我开始在我的一个项目中使用它来了解它. 我想在引导程序中使用jQuery,但是,当我启动应用程序时,我收到以下错误: bootstrap.min.js?5802:6Uncaught Error: Bootstrap’s JavaScript requires jQuery 在我的webpack配置中,我定义了两个入
我是webpack的新手,但我开始在我的一个项目中使用它来了解它.
我想在引导程序中使用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$/,{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","window.jQuery": "jquery",jQuery:"jquery" }) 我把它留在这里以防万一其他人面临同样的问题. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- bash – 检查命令错误是否包含子字符串
- 角2 |指令类型“{}”的参数不可分配
- 【K8S】基于Docker+K8S+GitLab/SVN+Jenkins+Harbor搭建持续
- scala – 从Spark DataFrame中删除一个嵌套列
- UNIX再学习 -- 网络与网络协议
- Free Geocoding Webservice 免费 邮编 转 经纬度 webservic
- scala – SHA3状态和PBKDF2-HMAC-SHA3测试向量
- 【数据结构】二叉树部分面试题解法
- scala – 如何将RDD [(Key,Value)]转换为Map [Key,RDD [Val
- shell – Groovy脚本可执行文件