在 React 项目中 Bootstrap 需要 jQuery答案

【问题标题】：jQuery needed for Bootstrap in React project在 React 项目中 Bootstrap 需要 jQuery
【发布时间】：2016-06-20 21:56:13
【问题描述】：

我正在开发一个 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((
  <Router history={browserHistory}>
    <Route name='home' path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route name='about' path='about' component={About} />
    </Route>
  </Router>), document.getElementById('app'))

网页包文件

'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 开发工具中出现错误：'Bootstrap's Javascript requires jQuery'。我想知道我是否在 webpack 文件中的加载器方面遗漏了某些内容，或者是否需要在入口文件中添加 import 语句？

【问题讨论】：

尝试将您的 jquery 导入移动到您的 babel-loader 上方的 webpack 文件中。
遗憾的是，错误仍然存在。在我的 package.json - "jquery": "^3.0.0" 中是否有帮助？

标签： javascript jquery reactjs twitter-bootstrap-3

【解决方案1】：

请确保您已安装“imports-loader”（npm install --save imports-loader）。在 module.exports 中试试这个：

{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' }

我在这里找到了关于它的非常好的帖子：http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

【讨论】：

【解决方案2】：

很遗憾，提供的解决方案对我不起作用。在上面的案例中，Bootstrap 和 jQuery 都安装为 node_modules 目录下的 npm 依赖项？我使用的是 WebPack 2，所以我将 loader 元素转换如下：

{
        test: /bootstrap.+\.(jsx|js)$/,
        use: 'imports-loader?jQuery=jquery,$=jquery,this=>window',
        exclude: /node_modules/
}

【讨论】：