Question

我的server.js文件是在节点中编写的，如下所示：

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>

我的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和images等资源。我能够使用this教程通过服务器呈现单个页面，但它似乎没有css和图像，它似乎完全改变了应用程序的流程，看起来并不像好。轻量级简单应用程序的任何示例都不使用在服务器上呈现的800000个不同的库？

Answer 1

主要问题是Node不知道如何处理需要你的非js / json资产。

Webpack支持的一个解决方案是使用target: 'node'和output.libraryTarget: commonjs2，这将在Node中生成准备好require d的捆绑包。

您还希望查看ExtractTextPlugin将CSS解压缩到一个单独的文件中，否则在JS下载之前，html将呈现未设置样式。

使用React Router时会有点复杂，但这里有一些很好的文档 - https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md

Answer 2

我一直在寻找类似的东西，发现这个博客很有用。您也应该尝试遵循它，它将很容易设置，并开始使用。 Server side rendering with react, node & express

如何在不严重修改现有应用程序的情况下在服务器上呈现我的反应组件？

2 个答案: