React项目中的Bootstrap需要jQuery
我正在开发一个React.js项目，而不是使用React-Bootstrap，我将Bootstrap的CSS加载到我的项目中。 我现在需要导入jQuery，以便我可以使用下拉菜单等。
入口点文件（index.js） – 希望它能工作
'use strict' import React from 'react' import { Route, Router, IndexRoute, browserHistory } from 'react-router' import { render } from 'react-dom' // Pages import Main from './pages/main/main' import Home from './pages/home/home' import About from './pages/about/about' window.jQuery = window.$ = require('jquery/dist/jquery.min') import '../node_modules/bootstrap/dist/css/bootstrap.min.css' import '../node_modules/bootstrap/dist/js/bootstrap.min.js' render(( ), document.getElementById('app')) Webpack文件
'use strict' const path = require('path') const webpack = require('webpack') module.exports = { entry: [ './browser/index' ], output: { path: path.join(__dirname, 'public', 'js'), filename: 'bundle.js', publicPath: '/public/js/' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), new webpack.NoErrorsPlugin() ], module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: [ 'es2015', 'react' ] }, include: path.join(__dirname, 'browser') }, { test: /\.css$/, loader: 'style-loader!css-loader' }, {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'}, {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: require.resolve('jquery'), loader: 'imports?jQuery=jquery' } ] } }
Chrome Dev工具中出现错误：’Bootstrap的Javascript需要jQuery’。 我想知道我是否遗漏了webpack文件中的加载器，或者在条目文件中需要import语句？
请确保您已安装’imports-loader’，（npm install –save imports-loader）。 在module.exports中试试这个：
{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' }
关于它的非常好的post我在这里找到： http ： //reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/
不幸的是，提供的解决方案不适合我。 在上面的情况下，Bootstrap和jQuery都作为npm依赖项安装在node_modules目录下？ 我正在使用WebPack 2，所以我已经将loader元素转换如下：
{ test: /bootstrap.+\.(jsx|js)$/, use: 'imports-loader?jQuery=jquery,$=jquery,this=>window', exclude: /node_modules/ }