在 Node 中导入 React .js抛出语法错误:意外的令牌导出



我正在尝试用 Node 实现 SSR.js并且按照这个例子 https://github.com/babel/example-node-server React 按照官方 Babel 文档中的建议 http://babeljs.io/docs/usage/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.

编辑

与 Babel 6 CLI 不同:意外的令牌导出?

那是因为你只转译./src/server而不是./src/admin。然后在./src/server中,您有exportBabel 未翻译的关键字,并且 Node 不支持export关键字 - 要了解原因,请参阅以下答案:

是否可以
  • 将 Babel npm 包用于节点.js服务器应用程序
  • javascript - 为什么有同步和异步模块的规范?
  • 从承诺结果导出节点模块

您需要转译所有使用 Node 本身不支持的语法的代码,而不仅仅是其中的一部分。

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

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

当然,除了server之外,不知道你有什么./srcadmin很难给你一个具体的解决方案 - 但这是一个很好的起点。

相关内容

  • 没有找到相关文章

最新更新