Reakcja po stronie serwera: Babel nie przekształca JSX na serwerze ani w locie, ani ręcznie. Czemu?

Question

Używam frameworka LoopbackJS dla Node.js (tak samo jak Express, ponieważ bazuje na Express). I nie mogę ustawić renderowania React po stronie serwera. Poszłam za this article, a odpowiedzi tutaj na Stackoverflow i innych artykułów, nie działa.

Doktorzy Babel są nieszczęśliwi, bez przykładów, "próbują odgadnąć" styl. Oto tylko kawałek informacji, które świadczą o tym, jak uczynić Reaguj na bieżąco:

$ npm install -g babel-core 

require("babel-core/register"); 

wszystkich kolejnych plików wymaganych przez węzeł z rozszerzeniami .es6, .es, .jsx i .js zostaną przekształcone przez Babel. Wymagana jest także automatycznie polyfill określona w polyfill.

Ale to nie działa.

Nawiasem mówiąc, inne artykuły sugerują użycie require("babel/register"). Jaka jest różnica? Próbowałem obu. Wynik jest taki sam - SyntaxError: Unexpected token.

Oto mój kod:

To 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; 

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

To server/server.js, punkt wejść. Wszystko jest standardem oprócz tego, że mogę skonfigurować Dust.js jak silnik Szablon:

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

A kiedy próbuję uruchomić serwer node server/server.js, mam to daleko SyntaxError: Unexpected token błędzie:

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) 

co mam zrobić źle? Czy to błąd Babla, czy w jakiś sposób LoopbackJS blokuje Babel? Jak włączyć renderowanie React?

Answer 1

Według Babel.js documentations od wersji 5:

wyjęciu z pudełka Babel nie robi nic. Aby właściwie nic do kodu musisz włączyć obsługę wtyczek

Więc należy zainstalować odpowiednią wtyczkę używając KMP, a także przekazać je do babel wymagają haczyk, coś takiego:

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

teraz zainstalować Babel predefiniowanych es2015 i Babel ustawione reagują stosując następujące polecenia:

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

Generalnie powinno to działać teraz, ale w oparciu o strukturę twojego projektu możesz potrzebować więcej zmian, aby babel działał. Możesz zadać dowolne pytanie, czy moje rozwiązanie nie działa.