jQueryがReactプロジェクトのBootstrapに必要です

Question

React-Bootstrapを使用する代わりに、BootstrapのCSSをプロジェクトに読み込むReact.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')) 

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

を働くだろう - 私は今、私はドロップダウンメニューなどを使用することができるようにjQueryをインポートする

エントリポイントファイル（index.js）を必要としています

Chrome Devツールにエラーが表示されます： 'ブートストラップのJavascriptにはjQueryが必要です'。私はおそらく私はwebpackファイルのローダーに関して何かを見逃しているのだろうか、またはエントリファイルにimportステートメントが必要かどうか疑問に思っていますか？

Answer 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/

Answer 2

残念ながら提供される解決策は、私のために動作しません。上記の場合、BootstrapとjQueryはどちらもnode_modulesディレクトリの下にnpm依存関係としてインストールされていますか？私はWebPack 2を使用していますので、ローダー要素を次のように変換しました：

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