jQuery potrzebne do Bootstrap w projekcie React

Question

Pracuję nad projektem React.js, gdzie zamiast używać React-Bootstrap, ładuję CSS Bootstrap do mojego projektu. Jestem teraz konieczności importowania jQuery tak, że mogę korzystać z rozwijanego menu itp

Entry plik punktu (index.js) - w nadziei, że to działa złożyć

'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')) 

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' } 
    ] 
    } 
} 

Błąd pojawia się w narzędziach przeglądarki Chrome: "JavaScript w Bootstrap wymaga jQuery". Zastanawiam się, czy może brakuje mi czegoś pod względem ładowarek w pliku webpack, czy też potrzebuję instrukcji import w pliku wejściowym?

Answer 1

Upewnij się, że zainstalowałeś "imports-loader", (npm install --save imports-loader). Aw module.exports spróbuj tego:

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

Naprawdę miły po jego temat znalazłem tutaj: http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

Answer 2

Niestety warunkiem rozwiązanie nie działa dla mnie. W powyższym przykładzie Bootstrap i jQuery są instalowane jako zależności npm w katalogu node_modules? Korzystam z pakietu WebPack 2, więc przekonwertowałem element ładujący w następujący sposób:

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