在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"
当然,除了server
和admin
之外,不知道你在./src
有什么东西,很难给你一个具体的解决scheme – 但这是一个很好的方向。