我一直在阅读很多关于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('
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端渲染的大多数文章中没有找到任何答案的一些问题 .
任何提示或建议表示赞赏!