服务器端 React：Babel 不会在服务器上转换 JSX，既不是动态也不是手动转换。为啥？

Posted 2023-02-22

【中文标题】服务器端 React：Babel 不会在服务器上转换 JSX，既不是动态也不是手动转换。为啥？

【英文标题】：Server-side React: Babel doesn't transform JSX on the server neither on the fly not manually. Why?服务器端 React：Babel 不会在服务器上转换 JSX，既不是动态也不是手动转换。为什么？

【发布时间】：2016-02-23 16:02:34

【问题描述】：

我为 Node.js 使用 LoopbackJS 框架（与 Express 相同，因为它基于 Express）。而且我无法设置 React 服务器端渲染。我关注了this article，在 *** 和其他文章上的答案都不起作用。

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 渲染？

【问题讨论】：

你是如何解决这个错误的？我得到了同样的一个。

【参考方案1】：

根据Babel.js documentations自第5版起：

开箱即用的 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 工作。如果我的解决方案不起作用，请随时提出任何问题。

【讨论】：

简短说明：我确定，但我认为您应该在 server/server.js 文件中添加 require 钩子。