如何为服务器端渲染路径匹配传输所有React ES6组件

我一直在阅读大量关于React服务器端渲染，使用Webpack，Express等常见设置的文章和研究。大多数组件使用React + ES6，将babel-register放置在快速入口点的开头，以允许在客户端和服务器之间共享ES6中编写的React Routes。其他人，运行babe-node来解决这个问题。不幸的是，babel-register或babel-node不建议用于生产，显然建议将其编译为单独的文件进行生产。如何为服务器端渲染路径匹配传输所有React ES6组件

据我所知，并测试了（除非我错过了我的设置的东西），客户端工作正常（一个捆绑的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 React ES6组件并导致语法错误。例如：

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

我的问题是关于如何transpile所有在生产反应器ES6组件，以避免使用巴贝尔注册或通天节点的？

Webpack有一个ExtractTextPlugin，用于将CSS从输出中提取到单个文件中，是否可以对组件执行相同操作？

我们是否必须运行babel将所有React App目录结构转换为一个新的目录，该目录将仅用于生产中的服务器端渲染？

这些是一些问题，在使用路由和匹配路由时，我在大多数关于React Server端渲染的文章中找不到任何答案。

任何提示或建议表示赞赏！

来源

2017-02-23 punkbit

您可以在构建过程中传输所有文件，并从传输的文件运行服务器。你可以使用webpack。

检查这个启动项目是如何做的：https://github.com/ctrlplusb/react-universally

来源

2017-02-23 13:19:38

感谢您的建议，我开始阅读的项目;目前有点令人沮丧，有很多事情要做，所以如果你知道任何好的阅读或任何其他项目（更小的脚印），那就太棒了！ – punkbit

如何为服务器端渲染路径匹配传输所有React ES6组件

回答

相关问题