服务器端反应：Babel不会在服务器上dynamic地转换JSX。 为什么？

我使用Node.js的LoopbackJS框架（与Express相同，因为它基于Express）。 而且我无法设置React服务器端渲染。 我遵循这篇文章 ，并在这里回答了Stackoverflow和其他文章，不起作用。

巴贝尔文件是悲惨的，没有例子，“尝试猜测”的风格。 以下是他们提供的关于如何在即时渲染React的唯一信息：

$ npm install -g babel-core require("babel-core/register"); 

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

但它不起作用。

顺便说一下，其他文章build议使用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 ，一个input点。 除了我将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) 

我做错了什么？ 它巴别尔的错误或以某种方式LoopbackJS块巴别卡？ 如何启用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工作。 随意问任何问题，如果我的解决scheme无法正常工作。