在Node.js中导入React throws SyntaxError:意外的令牌导出

我试图用Node.js和React实现SSR,按照这个例子https://github.com/babel/example-node-server的build议,在官方的Babel文档中这里http://babeljs.io/docs/usage / CLI /#巴别节点

为了开发,我使用了babel-node ; 为了生产,我想用babel来传递我的服务器并运行它:

的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 

然后,在某些path中,我可以根据请求导入我的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 ,它可以工作,但不build议在生产模式下使用它,所以我宁愿不这样做。

另外,当检查构build的服务器代码时,我发现:

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

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

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

编辑

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

那是因为你只是在./src/server而不是./src/admin 。 然后在./src/server你有export关键字没有由Babel翻译和export关键字不支持的节点 – 看看为什么,看到这些答案:

  • 对于node.js服务器应用程序,可以使用Babel npm包吗?
  • 为什么有同步和asynchronous模块的规范?
  • 从诺言结果导出节点模块

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

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

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

当然,除了serveradmin之外,不知道你在./src有什么东西,很难给你一个具体的解决scheme – 但这是一个很好的方向。