Question

我尝试按照此示例https://github.com/babel/example-node-server尝试使用Node.js和React实施SSR，如官方Babel docs http://babeljs.io/docs/usage/cli/#babel-node

所述

对于开发，我使用babel-node;对于生产我想用babel转换我的服务器并用node运行它：

的package.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 /服务器/ 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 /服务器/路由/ 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 /服务器/路由/ admin.js

var _store = require('../../../src/admin/store');

这意味着它仍然引用src文件夹。理想情况下，我希望以某种方式将这些模块合并到构建的服务器代码中，这样我就可以安全地从生产环境中删除src文件夹，只留下dist。

修改

与Babel 6 CLI: Unexpected token export?

不同

Answer 1

那是因为您只是./src/server而不是./src/admin。然后在./src/server中，您的export关键字未被Babel翻译，并且节点不支持export关键字 - 了解原因，请参阅以下答案：

您需要转换所有使用Node本身不支持的语法的代码，而不仅仅是部分代码。

将这样的脚本添加到package.json可能会有所帮助，具体取决于./src和./dist的组织方式：

"build:all": "babel ./src -d ./dist --copy-files -s inline"

当然，./src除了server和admin之外不知道你有什么，很难给你一个具体的解决方案 - 但这是一个很好的方向。

在Node.js中导入React会抛出SyntaxError：意外的令牌导出

的package.json

的src /服务器/ index.js

的src /服务器/路由/ admin.js

DIST /服务器/路由/ admin.js

修改

1 个答案: