Reazione lato server: Babel non trasforma JSX sul server né al volo, non manualmente. Perché?

Question

Uso il framework LoopbackJS per Node.js (lo stesso di Express perché è basato su Express). E non posso impostare il rendering lato server React. Ho seguito this article e le risposte qui su Stackoverflow e altri articoli non funzionano.

I documenti Babel sono infelici, nessun esempio, lo stile "prova a indovinare". Qui è l'unico pezzo di informazioni che forniscono su come rendere Reagire al volo:

$ npm install -g babel-core 

require("babel-core/register"); 

Tutti i file successive richieste dal nodo con le estensioni .es6, .es, .jsx e .js saranno trasformate da Babele. Anche il polyfill specificato in polyfill è richiesto automaticamente.

Ma non funziona.

A proposito, altri articoli suggeriscono di utilizzare require("babel/register"). Qual è la differenza? Ho provato entrambi. Il risultato è lo stesso - SyntaxError: Unexpected token.

Ecco il mio codice:

Questo è 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; 

Questo è 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 
     }); 
    }); 
}; 

Questo è server/server.js, un punto di entrare. Tutto è di serie, tranne che ho creato Dust.js come un motore di template:

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(); 
}); 

E quando provo ad avviare un server node server/server.js, ho questa lunga gittata SyntaxError: Unexpected token errore:

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) 

Cosa devo fare sbagliato? È l'errore di Babel o in qualche modo LoopbackJS blocca Babel? Come abilitare il rendering React?

Answer 1

Secondo il Babel.js documentations dalla versione 5:

Fuori dalla scatola Babel non fa nulla. Per fare davvero qualsiasi cosa per il codice è necessario attivare i plugin

Quindi è necessario installare plug-in appropriato utilizzando NPM e anche passarlo al babele di richiedono gancio, qualcosa di simile:

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

Ora , installare babel preimpostato-es2015 e babel preimpostato-reagire utilizzando il seguente comando:

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

In generale dovrebbe funzionare ora ma, in base alla struttura del progetto, potrebbero essere necessarie ulteriori modifiche per far funzionare Babele. Sentiti libero di fare qualsiasi domanda se la mia soluzione non funziona.