サーバーサイドレンダリングのためのすべてのReact ES6コンポーネントのルーティング方法

Question

Webpack、Expressなどの一般的な設定を使用して、React Server Side Renderingに関する記事や研究をたくさん読んできました。ほとんどの場合、クライアントとサーバの間でES6で書かれたReact Routesを共有できるように、コンポーネントのReact + ES6を使用し、Expressエントリポイントの先頭にbabel-registerを配置します。他の人は、この問題を解決するためにベイビーノードを実行します。残念なことに、babel-registerやbabel-nodeはプロダクションでの使用はお勧めできません。プロダクション用に別のファイルにコンパイルすることをお勧めします。

私の知る限りでは​​

とテスト（私は私のセットアップに何かを逃した場合を除く）、クライアント側は（単一バンドルjsのはその中のすべてのルートなどを持つファイル）正常に動作します。構文エラーのためにサーバー側のレンダリングが失敗します。ビルダーは、エクスプレスES6コード（サーバー）をES5に移しますが、これらのコンポーネントが動的にヒットした場合、すべてのルートコンポーネントを事前にトランシルアライズしません！

アプリケーションコンポーネントは、事前に輸入されているので、これは問題ではないので、ビルドジョブがそれをtranspilesルートずにプロジェクトのために、以下の例を参照してください：

router.get('*', (req, res, next) => { 
    const preloadedState = {'foobar': 1} 
    const store = configureStore(preloadedState) 
    const myAppHtml = renderToString(
    <Provider store={store}> 
     <App /> 
    </Provider> 
) 
    const finalState = store.getState() 
    let html = htmlTemplateString.replace('<div id="app">', '<div id="app">' + myAppHtml) 
    const preloadedStateScript = `<script>window.__PRELOADED_STATE__ = ${JSON.stringify(finalState).replace(/</g, '\\x3c')}</script>` 
    html = html.replace('</head>', preloadedStateScript) 
    res.send(html) 
}) 

ながら、ダイナミックなルート変更サーバーでは、importはES6コンポーネントに反応し、構文エラーを引き起こします。たとえば：

router.get('*', (req, res) => { 
    match({routes, location: req.url}, (error, redirectLocation, renderProps) => { 
    const myAppHtml = renderToString(<RouterContext {...renderProps}/>); 
    ... 
    }) 
}) 

私の質問は、すべての生産のバベル登録またはバベルノードの使用を避けるために、ES6コンポーネントに反応transpileする方法についてですか？

Webpackには、出力から個々のファイルにCSSを抽出するために使用されるExtractTextPluginがあります。これはコンポーネントに対しても同じことが可能ですか？

我々は、すべての生産だけでサーバー側のレンダリングに使用されます新しいディレクトリにアプリケーションディレクトリ構造と反応transpileするバベルを実行する必要がありますか？

これらは私がルートとマッチルートを使用した場合について、サーバー側のレンダリングに反応見出される最も記事内の任意の答えを見つけられませんでした質問のいくつかです。

ヒントやご提案をいただければ幸いです。

Answer 1

ビルドプロセスですべてのファイルをトランスポートし、トランスファイルからサーバーを実行できます。そのためにwebpackを使うことができます。このスタータープロジェクトがそれをやっている方法を

チェック：あなたの提案のためのhttps://github.com/ctrlplusb/react-universally