我正在尝试使用 Node.js 实现 SSR,并按照此示例https://github.com/babel/example-node-server按照此处的官方 Babel 文档http://babeljs.io/docs/usage中的建议使用 React /cli/#babel-node
对于开发,我正在使用babel-node
; 对于生产,我想用 babel 转换我的服务器并运行它node
:
包.json
"scripts": {
"start": "node ./dist/server/index.js",
"dev:server": "nodemon ./src/server/index.js -x babel-node",
"build:server": "babel ./src/server -d ./dist/server --copy-files -s inline"
},
"babel": {
"presets": [
"env",
"react",
"stage-2"
],
"plugins": [
"transform-decorators-legacy"
]
}
服务器使用 ES6 语法编写:
src/server/index.js
import 'babel-polyfill'
import './config'
import Express from 'express'
import bootstrap from './bootstrap'
const app = Express()
bootstrap(app)
export default app
然后在某些路线中,我导入我的 React 组件以根据请求将其呈现为 HTML:
src/server/routes/admin.js
import { Router } from 'express'
import React from 'react'
import createHistory from 'history/createMemoryHistory'
import { renderToString } from 'react-dom/server'
import { Provider } from 'react-redux'
import { StaticRouter, matchPath } from 'react-router'
import configureStore from '../../../src/admin/store'
import routes from '../../../src/admin/routes'
import Root from '../../../src/admin/containers/Root'
// etc.
服务器尝试导入 React 组件时抛出错误
./src/admin/store/index.js:11
export default configureStore
^^^^^^
SyntaxError: Unexpected token export
我尝试babel-register
在服务器中使用,它可以工作,但不建议在生产模式下使用它,所以我宁愿不这样做。
此外,在检查构建的服务器代码时,我发现:
dist/server/routes/admin.js
var _store = require('../../../src/admin/store');
这意味着它仍在引用该src
文件夹。理想情况下,我想以某种方式将这些模块合并到构建的服务器代码中,这样我就可以安全地src
从生产环境中删除文件夹,只留下dist
.