Serverseitige Reaktion: Babel transformiert JSX auf dem Server weder im Handumdrehen noch manuell. Warum?

Question

Ich benutze LoopbackJS-Framework für Node.js (das gleiche wie Express, weil es auf Express basiert). Und ich kann das Reagieren serverseitige Rendering nicht einstellen. Ich folgte this article, und antwortet hier auf Stackoverflow und anderen Artikeln, funktioniert nicht.

Babel docs sind miserabel, keine Beispiele, "versuchen zu erraten" -Stil. Hier ist das einzige Stück von Informationen, die sie zur Verfügung stellen, wie im Fluge zu machen Reagieren:

$ npm install -g babel-core 

require("babel-core/register"); 

Alle nachfolgenden durch die Knoten erforderlichen Dateien mit den Erweiterungen .es6, .es, .jsx und Js werden umgewandelt von Babel. Das in polyfill angegebene Polyfill wird ebenfalls automatisch benötigt.

Aber es funktioniert nicht.

Übrigens schlagen andere Artikel vor, require("babel/register") zu verwenden. Was ist der Unterschied? Ich habe beides versucht. Ergebnis ist das gleiche - SyntaxError: Unexpected token.

Hier ist mein Code:

Dies ist 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; 

Dies ist 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 
     }); 
    }); 
}; 

Dies ist server/server.js, ein Punkt eingeben. Alles ist Standard, außer dass setze ich Dust.js als Template-Engine auf:

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

Und wenn ich versuche, einen Server node server/server.js ich diese lange SyntaxError: Unexpected token Fehler Wurf erhalten zu starten:

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) 

Was muss ich tun, falsch? Ist es Babels Fehler oder irgendwie LoopbackJS blockiert Babel? Wie aktiviert man das Rendern Rendern?

Answer 1

Nach dem Babel.js documentations seit Version 5:

Aus dem Kasten Babel macht nichts. Um etwas zu Ihren Code tatsächlich tun müssen Sie Plugins

So aktivieren sollten Sie entsprechende Plugin npm installieren und auch den Babels Haken benötigen passieren, so etwas wie dieses:

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

Jetzt installieren, babel-Preset-es2015 und babel-Preset reagieren mit dem folgenden Befehl:

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

Im Allgemeinen sollte es jetzt funktionieren, aber basierend auf der Struktur Ihres Projekts benötigen Sie möglicherweise mehr Änderungen, damit Babel funktioniert. Fühlen Sie sich frei, irgendeine Frage zu stellen, wenn meine Lösung nicht funktioniert.