node.js - 服务器端 React : Babel doesn't transform JSX on the server neither on the fly not manually. 为什么？

Question

我为 Node.js 使用 LoopbackJS 框架(与 Express 相同，因为它基于 Express)。而且我无法设置 React 服务器端渲染。我关注了this article以及 Stackoverflow 和其他文章中的答案均无效。

Babel 文档很糟糕，没有示例，“尝试猜测”风格。这是他们提供的关于如何动态渲染 React 的唯一信息:

$ npm install -g babel-core

require("babel-core/register");

All subsequent files required by node with the extensions .es6, .es, .jsx and .js will be transformed by Babel. The polyfill specified in polyfill is also automatically required.

但它不起作用。

对了，其他文章建议使用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

根据Babel.js documentations从版本 5 开始:

Out of the box Babel doesn't do anything. In order to actually do anything to your code you need to enable plugins

所以你应该使用 npm 安装合适的插件，并将它传递给 babel 的 require 钩子(Hook)，像这样:

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

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

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

一般来说，它现在应该可以工作了，但是根据您项目的结构，您可能需要进行更多更改才能使 babel 工作。如果我的解决方案不起作用，请随时提出任何问题。