服务器端文件包含语法为,如何转换所有React ES6组件以进行服务器端渲染路由匹配...

我一直在阅读很多关于React Server Side Rendering的文章和研究，使用Webpack，Express等常见设置 . 大多数人将React ES6用于组件，将babel-register放在express入口点的开头，以允许在客户端和服务器之间共享用ES6编写的React Routes . 其他人，运行宝贝节点来解决这个问题 . 不幸的是，不建议将babel-register或babel-node用于 生产环境 用途，显然建议编译为单独的文件进行 生产环境 .

// As an example, demonstrating that `production` should not

// require babe-register, but development

if (['staging', 'production'].indexOf(process.env.NODE_ENV) > -1) {

require('./dist/server.prod.js')

} else {

require('babel-register')

require('./server.dev.js')

}

据我所知和测试(除非我错过了我的设置)，客户端工作正常(一个捆绑的js文件包含所有路由等);由于语法错误，服务器端呈现失败 . 构建器将快速ES6代码(服务器)转换为ES5，但不会事先将所有路径组件都转换为动态命中！

对于没有Routes的项目，请参阅以下示例，这不是问题，因为App组件是预先导入的，因此构建作业会将其转换为：

router.get('*', (req, res, next) => {

const preloadedState = {'foobar': 1}

const store = configureStore(preloadedState)

const myAppHtml = renderToString(

)

const finalState = store.getState()

let html = htmlTemplateString.replace('

', '

' + myAppHtml)

const preloadedStateScript = `window.__PRELOADED_STATE__ = ${JSON.stringify(finalState).replace(/`

html = html.replace('', preloadedStateScript)

res.send(html)

})

虽然，服务器中的动态路由发生变化，但会导致语法错误 . 例如：

router.get('*', (req, res) => {

match({routes, location: req.url}, (error, redirectLocation, renderProps) => {

const myAppHtml = renderToString();

...

})

})

我的问题是关于如何转换所有React ES6组件以避免在 生产环境 中使用babel-register或babel-node？

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

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

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

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