Question

我已按照此处的教程进行操作：

https://blog.frankdejonge.nl/rendering-reactjs-templates-server-side/

在我的server.js中：

'use strict';

require("babel/register");
var React = require('react');
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var app = express();
app.use(bodyParser.json());
app.use('/', function(req, res) {
    try {
        var view = path.resolve('public/src/' + req.query.module);
        var component = require(view);
        var props = req.body || null;
        res.status(200).send(
            React.renderToString(
                React.createElement(component, props)
            )
        );
    } catch (err) {
        res.status(500).send(err.message);
    }
});

app.listen(3000);
console.log('Listening carefully...')

但是当我运行它时，我得到Cannot find module 'babel/register'

如果我发表评论，它可以运作，但我在浏览器中收到以下内容：

Unexpected token import

我猜这是由于错误。

我该如何解决这个问题？

我把它更改为：

require('babel-register')({
    presets: ['es2015', 'react']
});
...

这让它更进一步，但现在我的浏览器中得到了：

React.renderToString is not a function

我的组件：

import React from 'react';

class HelloComponent extends React.Component {
    render () {
        return (
            <h1>Hello, {this.props.name}!</h1>
        );
    }
}

HelloComponent.defaultProps = { name: 'World' };

export default HelloComponent;

Answer 1

现在proper syntax的babel register似乎有所不同：安装babel后使用require("babel-register");。

请参阅require('babel/register') doesn't work：这是一个类似的问题

Answer 2

看起来这段代码使用的是BabelJS第5版 - 所以当你安装babel @ 5时 - 它应该可以工作。

但是，如果用require("babel/register");替换require("babel-register");并使用babel @ 6，可能会更好。此外，您还需要添加.babelrc文件以及babeljs（https://babeljs.io/docs/usage/babelrc/）的配置。

如果您准备使用配置进行反应组件的服务器端呈现 - 请看一下这个项目：https://github.com/zxbodya/reactive-widgets（我是作者）。

它不仅仅是服务器端渲染 - 它是一个完整的解决方案，允许您为PHP应用程序构建同构js组件。

使用Node进行ReactJS Serverside渲染

2 个答案: