错误:Bootstrap的JavaScript需要jQuery,使用Webpack

前端之家收集整理的这篇文章主要介绍了错误:Bootstrap的JavaScript需要jQuery,使用Webpack前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是webpack的新手,但我开始在我的一个项目中使用它来了解它.

我想在引导程序中使用jQuery,但是,当我启动应用程序时,我收到以下错误

bootstrap.min.js?5802:6Uncaught Error: Bootstrap’s JavaScript requires 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"
})

我把它留在这里以防万一其他人面临同样的问题.

原文链接:https://www.f2er.com/bootstrap/233987.html

猜你在找的Bootstrap相关文章