服务器端React:Babel不会在服务器上转换JSX,也不会手动转换.为什么？

Question

我为Node.js使用LoopbackJS框架(与Express相同,因为它基于Express).我无法设置React服务器端渲染.我按照这篇文章,在这里回答Stackoverflow和其他文章,但不起作用.

Babel文档很悲惨,没有例子,"试着猜测"的风格.这是他们提供的关于如何动态渲染React的唯一信息:

$ npm install -g babel-core

require("babel-core/register");

具有扩展名.es6,.es,.jsx和.js的节点所需的所有后续文件将由Babel转换.polyfill中指定的polyfill也是自动需要的.

但它不起作用.

顺便说一句,其他文章建议使用require("babel/register").有什么不同？我试过了两个.结果是一样的 - SyntaxError: Unexpected token.

这是我的代码:

这是client/js/components.js:

var React = require('react');
var ReactDOM = require('react');


var Form = React.createClass({
    render: function() {
        return (
            <form action="" method="post" id="login-form">
                <div><input type="text" id="login" placeholder="Login" /></div>
                <div><input type="text" id="pass" placeholder="Password" /></div>
            <button id="sbm-btn">{login}</button>
        </form>
        );
    }
});

exports.Form = Form;

这是server/boot/routes.js:

require("babel-core/register"); // <== I tried to include it here, doesn't work
var React = require('react');
var ReactDOM = require('react-dom/server');
var components = require('../../client/js/components.js');

module.exports = function(app) {
    app.get('/login', function(req, res) {
        var Form = React.createFactory(components.Form); // <== Include component

        res.render('login', {
            react: ReactDOM.renderToString(Form({login: "Sign In"})) // <== render component
        });
    });
};

这是server/server.js一个切入点.除了我设置Dust.js为模板引擎外,所有都是标准的:

require('babel-core/register'); // <== I tried to include it here. Doesn't work

var loopback = require('loopback');
var boot = require('loopback-boot');
var adaro = require('adaro');  // <== for Dust.js template engine
var path = require('path');
var bodyParser = require('body-parser');

var app = module.exports = loopback();

app.start = function() {
    // start the web server
    return app.listen(function() {
        app.emit('started');
        console.log('Web server listening at: %s', app.get('url'));
    });
};

// Dust.js template engine settings
app.set('views', path.resolve(__dirname, '../views'));
app.engine('dust', adaro.dust({}));
app.set('view engine', 'dust');


// Bootstrap the application, configure models, datasources and middleware.
// Sub-apps like REST API are mounted via boot scripts.
boot(app, __dirname, function(err) {
    if (err) throw err;

    // start the server if `$ node server.js`
    if (require.main === module)
        app.start();
});

当我尝试启动服务器时node server/server.js,我得到这个长SyntaxError: Unexpected token错误:

Failed loading boot script: c:\Users\user\sbox\node\myApp\server\boot\routes.js
SyntaxError: c:/Users/user/sbox/node/myApp/client/js/components.js: Unexpected token (8:12)
   6 |     render: function() {
   7 |         return (
>  8 |             <form action="" method="post" id="login-form">
     |             ^
   9 |                 <div><input type="text" id="login" placeholder="Login" /></div>
  10 |                 <div><input type="text" id="pass" placeholder="Password" /></div>
  11 |             <button id="sbm-btn">{login}</button>
    at Parser.pp.raise (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:22:13)
    at Parser.pp.unexpected (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\util.js:91:8)
    at Parser.pp.parseExprAtom (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:510:12)

    at Parser.pp.parseExprSubscripts (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:2
65:19)
    at Parser.pp.parseMaybeUnary (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:245:1
9)
    at Parser.pp.parseExprOps (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:176:19)
    at Parser.pp.parseMaybeConditional (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js
:158:19)
    at Parser.pp.parseMaybeAssign (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:121:
19)
    at Parser.pp.parseParenAndDistinguishExpression (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\
expression.js:583:26)
    at Parser.pp.parseExprAtom (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:469:19)

c:\Users\user\sbox\node\myApp\node_modules\loopback-boot\lib\executor.js:273
      throw err;
            ^
SyntaxError: c:/Users/user/sbox/node/myApp/client/js/components.js: Unexpected token (8:12)
   6 |     render: function() {
   7 |         return (
>  8 |             <form action="" method="post" id="login-form">
     |             ^
   9 |                 <div><input type="text" id="login" placeholder="Login" /></div>
  10 |                 <div><input type="text" id="pass" placeholder="Password" /></div>
  11 |             <button id="sbm-btn">{login}</button>
    at Parser.pp.raise (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:22:13)
    at Parser.pp.unexpected (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\util.js:91:8)
    at Parser.pp.parseExprAtom (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:510:12)

    at Parser.pp.parseExprSubscripts (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:2
65:19)
    at Parser.pp.parseMaybeUnary (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:245:1
9)
    at Parser.pp.parseExprOps (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:176:19)
    at Parser.pp.parseMaybeConditional (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js
:158:19)
    at Parser.pp.parseMaybeAssign (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:121:
19)
    at Parser.pp.parseParenAndDistinguishExpression (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\
expression.js:583:26)
    at Parser.pp.parseExprAtom (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:469:19)

我做错了什么？这是Babel的错误还是以某种方式LoopbackJS阻止了Babel？如何启用React渲染？

Answer 1

根据自第5版以来的Babel.js文档:

开箱即用Babel什么都不做.为了对代码实际执行任何操作,您需要启用插件

所以你应该使用npm安装适当的插件,并将它传递给babel的require钩子,如下所示:

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

现在,使用以下命令安装babel-preset-es2015和babel-preset-react:

npm install --save babel-preset-es2015 babel-preset-react

一般情况下,它应该现在可以工作,但根据您的项目结构,您可能需要进行更多更改才能使babel工作.如果我的解决方案不起作用,请随意提出任何问题.