Question

我想最初使用ExpressJS在服务器上渲染我的ReactJS应用程序。

即使我设法使用 require（）导入ES6模块，但在加载模块时它会崩溃，因为该模块包含ES6代码（ES6导入和导出）。

索引路线

var express = require('express');
var router = express.Router();

var React = require('react');
var ReactDOMServer = require('react-dom/server');

var App = require('../../src/app').default(); 
var template = require('../../src/template').default();

/* GET home page. */
router.get('/', function(req, res, next) {
    const appString = ReactDOMServer.renderToString(App)
    res.send(template({
        body: appString,
        title: 'Some title'
    }));
});

module.exports = router;

返回初始html的模板组件：

export default ({ body, title }) => {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <title>${title}</title>
        <link rel="stylesheet" href="/assets/index.css" />
      </head>

      <body>
        <div id="root">${body}</div>
      </body>

      <script src="/assets/bundle.js"></script>
    </html>
  `;
};

App.js - 我想要变成字符串的组件

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        {this.props.children}
      </div>
    );
  }
}
export default App;

npm start

C:\Users\zivan\Desktop\weep\client\src\app.js:1
(function (exports, require, module, __filename, __dirname) { import React, { Component } from 'react';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\zivan\Desktop\weep\client\server\routes\index.js:7:43)
    at Module._compile (module.js:570:32)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! server@0.0.0 start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the server@0.0.0 start script 'node ./bin/www'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the server package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./bin/www
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs server
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls server
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\zivan\Desktop\weep\client\server\npm-debug.log

Answer 1

Node不支持ES2015 import语句。使用require。

本文可以提供您正在尝试执行的操作的完整深入示例：

https://blog.yld.io/2015/06/10/getting-started-with-react-and-node-js/#.WLJAsRIrJP0

Answer 2

您可以在运行之前使用babel-node编译ES6代码。

但它不适合生产使用。您不应该在生产中使用babel-node。由于高速缓存存储在存储器中，因此存储器使用率很高，这是不必要的。您还将始终遇到启动性能损失，因为整个应用程序需要动态编译。

查看example Node.js server with Babel，了解如何在生产部署中使用Babel。

如何将ReactJS es6代码导入Express应用程序？

2 个答案: