个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
27
4
我的 server.js 文件是用 node 编写的，如下所示:
var path = require('path');
var express = require('express');
var app = express();
var PORT = process.env.PORT || 8080
// using webpack-dev-server and middleware in development environment
if(process.env.NODE_ENV !== 'production') {
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var webpack = require('webpack');
var config = require('./webpack.config');
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));
}
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function(request, response) {
response.sendFile(__dirname + '/dist/index.html')
});
app.listen(PORT, function(error) {
if (error) {
console.error(error);
} else {
console.info("Listening on port %s", PORT);
}
});
我的 index.html 看起来像这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>what ever</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id='root'/>
</body>
<script src="/bundle.js"></script>
</html>
包含我的 React 路由器代码的 index.js 文件如下所示:
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory, hashHistory } from 'react-router';
/*----------- STYLESHEETS -----------*/
require('./assets/stylesheets/base.scss');
let history = process.env.NODE_ENV === "production" ? browserHistory : hashHistory;
/*----------- ROUTE COMPONENTS -----------*/
import Home from './components/home';
import Company from './components/company';
import Features from './components/features';
import Help from './components/help';
import SignUp from './components/signup';
import Work from './components/work';
render((
<Router history={history}>
{/** ###### HOME ROUTE ###### */}
<Route path="/" component={Home} />
<Route path="/company" component={Company} />
<Route path="/help" component={Help} />
<Route path="/features" component={Features} />
<Route path="/signup" component={SignUp} />
<Route path="/work" component={Work} />
{/** ###### END HOME ROUTES ###### */}
</Router>
), document.getElementById('root'));
我正在使用 webpack 构建和包含 sass 和图像等 Assets 。我能够使用 this通过服务器呈现单个页面的教程，但它似乎没有 css 和图像，而且它似乎也以一种看起来不太好的方式完全改变了应用程序的流程。有没有不使用在服务器上呈现的 800000 个不同库的轻量级简单应用的示例？
最佳答案
主要问题是 Node 不知道如何处理需要您的非 js/json Assets 。
Webpack 开箱即用的一种解决方案是使用 target: 'node'和 output.libraryTarget: commonjs2这将生成一个准备好在 Node 中被 required 的包。
您还需要查看 ExtractTextPlugin将您的 CSS 提取到一个单独的文件中，否则 html 将在 JS 下载之前呈现未样式化。
使用 React Router 时会变得有点复杂，但这里有一些很好的文档 - https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
关于javascript - 如何在不大量修改现有应用程序的情况下在服务器上呈现我的 React 组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37011248/
27
4
0
我是一名优秀的程序员,十分优秀！