サーバサイドレンダリングに反応する予期しないトークンJSXとBabel

Question

babelを使用してサーバサイドでjsxを使用できる正しい方法を見つけるのが難しいです。

Node-jsxはバベルでは使用されなくなりました。 babel-core/registerが使用されていると思われますが、予期しないトークンの問題が発生します。

私はこの問題を持ったレポを作成しました。

https://github.com/pk1m/Stackoverflow-helpme

私はnode appまたはnpm run watch-jsを実行すると、私はJSXコード '<' に言及する予期しないトークンを取得しておきます。

どのようにJSXを蒸散させるか、私は完全にオフになっています。

Answer 1

babel/register（npm i babel --save）を使用する必要があります。

require('babel/register')({ 
    stage: 0 
}); 

実験用のバーベル機能を使用していない場合は、ステージ0を省略できます。これらのオプションを代わりに.babelrcに入れることもできます。

これは、呼び出した後に必要なファイルに対してのみ機能します（そのため、そのファイルには影響しません）。

.babelrcファイルには、プリセットやその他のオプションを設定することもできます。

npm i babel-core babel-preset-es2015 babel-preset-react --save 

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

注： 6倍バベルのために

も0-2プリセットが上演されています。あなたはpackage.jsonに書いたようウォッチングのために

1つのFacebookはノートhere（または使用のWebPACK）に示唆されているようにあなたは、CLIコマンドを試みることができる：

babel --presets react es2015 --watch app/ --out-dir build/