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

Question

I want to render my ReactJS app initially on server using ExpressJS. 我想最初使用ExpressJS在服务器上渲染我的ReactJS应用程序。

Even though I managed to import ES6 modules using require() , when module is loaded it crashes because that module contains ES6 code(ES6 import and export). 即使我设法使用require（）导入ES6模块，在加载模块时也会崩溃，因为该模块包含ES6代码（ES6导入和导出）。

Index Route 索引路线

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;

Template component which returns my initial html: 返回我的初始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 - Component I want to turn into string 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 npm开始

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 does not support ES2015 import statements. 节点不支持ES2015导入语句。 Use require . 使用require 。

This article can provide a full in-depth example of what you are trying to do: 本文可以提供您尝试做的完整的深入示例：

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

Answer 2

You can use babel-node to compile ES6 code before running it. 您可以在运行ES6代码之前使用babel-node进行编译。

But it is not meant for production use. 但这并不意味着可用于生产。 You should not be using babel-node in production. 您不应在生产中使用babel-node 。 It is unnecessarily heavy, with high memory usage due to the cache being stored in memory. 由于缓存存储在内存中，因此不必要地增加了内存使用量。 You will also always experience a startup performance penalty as the entire app needs to be compiled on the fly. 由于整个应用程序都需要动态编译，因此您还将始终遭受启动性能损失。

Check out the example Node.js server with Babel for an idea of how to use Babel in a production deployment. 查看带有Babel的示例Node.js服务器，以了解如何在生产部署中使用Babel。

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

问题描述

2 个解决方案

解决方案1
1 2017-02-26 02:42:20

解决方案2
1 2017-03-03 12:55:39

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

问题描述

2 个解决方案

解决方案1 1 2017-02-26 02:42:20

解决方案2 1 2017-03-03 12:55:39

解决方案1
1 2017-02-26 02:42:20

解决方案2
1 2017-03-03 12:55:39