在 ReactJs 上使用 Pure Bootstrap v4 不起作用
Posted
技术标签:
【中文标题】在 ReactJs 上使用 Pure Bootstrap v4 不起作用【英文标题】：Use Pure Bootstrap v4 on ReactJs is NOT working 【发布时间】：2018-02-16 22:07:19 【问题描述】：我非常想在我的 React.js 应用程序上使用纯 Bootstrap v4。我使用 create-react-app 创建了我的应用程序。所以，我把 Bootstrap 资产放在 index.html 上（在公共文件夹中）。
在第一次尝试时，它运行良好。然后，我添加了一些依赖项，例如 react-router-dom、react-router-config 和 prop-types。突然间，它显示出几乎是一个空白页面。
1) 项目文件夹
2) kodebaru/webpack.config.js
const path = require('path');
module.exports =
entry: path.join(__dirname, '/client/src/index.jsx'),
output:
path: path.join(__dirname, '/client/dist/js'),
filename: 'app.js',
,
module:
loaders: [
test: /\.jsx?$/,
include: path.join(__dirname, '/client/src'),
loader: 'babel-loader',
query:
presets: ["react", "es2015"]
]
,
watch: true
;
3) kodebaru/server.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.resolve(__dirname, './backend/static/')));
app.use(express.static(path.resolve(__dirname, './client/dist/')));
app.get('*', (req, res) =>
res.sendFile(path.resolve(__dirname, './backend/static/', 'index.html'));
);
const PORT = process.env.PORT || 3500;
app.listen(PORT, () =>
console.log(`App listening on port $PORT!`);
);
4) kodebaru/backend/static/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Kodebaru</title>
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
</head>
<body>
<div id="root"></div>
<script src="/js/app.js"></script>
</body>
</html>
5) 结果
6) 警告信息
我知道 React 应用程序有一个框架引导程序 (reactstrap)。但是，这次我想知道如何在 react app 中使用纯 bootstrap v4 ？
【问题讨论】：
是否有任何控制台错误？渲染的 html 是什么？ @Panther .. 没什么 如果没有渲染，那么服务器没有发送任何数据？显示一些小提琴或位置来检查！ @Panther .. 我已经添加了详细信息 看起来问题出在 CSS 上。有导航相关的标签，它们不显示。检查并找出它在 UI 上不可见的原因 【参考方案1】：为时已晚。但是，我认为回答我自己的问题很好，因为没有人。解决方案是使用 npm 安装 bootstrap，在 index.jsx 上导入 bootstrap，在 webpack 配置文件中添加 jQuery、Popper.js 和 css loader。
a) 使用 npm 安装引导程序
npm install bootstrap@4.0.0-beta
b) 在 index.jsx 上导入引导程序
import 'bootstrap';
require('bootstrap/dist/css/bootstrap.css');
c) 在 webpack 上添加 jQuery 和 Popper.js
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
)
d) 在 webpack 上添加 css 加载器
test: /\.css$/,
use: ['style-loader', 'css-loader']
完整的实现如下：
1) index.jsx
import React from 'react';
import Provider from 'react-redux';
import createStore, applyMiddleware, compose from "redux";
import promise from "redux-promise";
import ReactDOM from 'react-dom';
import BrowserRouter as Router from 'react-router-dom';
import renderRoutes from 'react-router-config';
import routes from './routes.js';
import reducers from './redux/reducers/index.js'
import 'bootstrap';
require('bootstrap/dist/css/bootstrap.css');
const createStoreWithMiddleware = createStore(reducers, , compose(applyMiddleware(promise)));
ReactDOM.render(
<Provider store = createStoreWithMiddleware>
<Router>
/* kick it all off with the root route */
renderRoutes(routes)
</Router>
</Provider>,
document.getElementById('root')
);
if(module.hot)
module.hot.accept('./routes.js', function()
routes();
)
2) webpack.config.js
const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports =
entry: './app/index.js',
output:
filename: 'index_bundle.js',
path: path.resolve(__dirname, 'dist')
,
module:
rules: [
test: /\.jsx?$/,
include: path.join(__dirname, '/app'),
exclude: '/node_modules',
loader: 'babel-loader',
query:
presets: ["react", "es2015"],
plugins: [
"transform-react-pug",
"transform-react-jsx",
"transform-object-rest-spread"
]
,
test: /\.css$/,
use: ['style-loader', 'css-loader']
,
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
]
,
plugins: [
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin(
template: './index.html'
)
],
devtool: 'cheap-module-eval-source-map',
watch: true
;
【讨论】：
以上是关于在 ReactJs 上使用 Pure Bootstrap v4 不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Python里Pure pathsPurePosixPathPureWindowsPath的区别