在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';