在React/Redux开发过程中，安装bootstrap的正确方法是什么？

Question

我可以做npm install --save bootstrap，但它然后坐在node_modules。

一种方法是下载zip文件并从中提取需要的文件，但它并不认为您使用npm/webpack的标准方式。那么做这件事的标准方式是什么？

Answer 1

您需要安装一些依赖于配置引导在反应

首先安装以下loaders和dependencies

npm install react react-dom bootstrap babel-preset-react --save 

npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev 

现在你的WebPack您需要配置这些装载机

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: './main.js', 
    output: { path: __dirname, filename: 'bundle.js' }, 
    module: { 
    loaders: [ 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     }, 
     { 
     test: /\.png$/, 
     loader: "url-loader?limit=100000" 
     }, 
     { 
     test: /\.jpg$/, 
     loader: "file-loader" 
     }, 
     { 
     test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/font-woff' 
     }, 
     { 
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/octet-stream' 
     }, 
     { 
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'file' 
     }, 
     { 
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=image/svg+xml' 
     } 
    ] 
    }, 
}; 

在此之后，您需要在入口文件中导入Bootstrap css，例如index.js，如

import 'bootstrap/dist/css/bootstrap.css';