javascript - 如何将 ReactJS 添加到现有的 node.js 后端应用程序

Question

我有一个非常简单的 node.js API

结构:

| project-name
|  public
|     index.html
|     ... some static js/css
|  app.js
|  package.json

应用.js

var express = require('express'),
  bodyParser = require('body-parser'),
  http = require('http');

var app = module.exports = express();
app.set('port', process.env.PORT || 8000);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(express.static(path.join(__dirname, 'public')));

app.route('/api/projects').get(...).post(...)
app.route('/api/sales').get(...).post(...)

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// Starting express server
http.createServer(app).listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

运行服务器 - node app.js

注意:这是一个学习项目，不用于生产。我只想弄清楚它们是如何协同工作的。

现在我想将 ReactJS 添加到这个项目中(实际上是添加到 public/index.html)。但我仍然想使用 app.js 来运行带有它的 api 的服务器，使用相同的端口。

我知道如何进行“生产构建”(将所有 jsx 编译为 js 并用作简单脚本)。我的问题只是关于开发服务器。

我要:

• 仅使用一个命令(node app.js 或 nodemon app.js 等)运行服务器 (api) 和客户端 (reactjs)
• 在脚本更改后自动重新加载(似乎 nodemon 可以做到)

Answer 1

要使两者都使用单个命令运行，您可以添加如下命令:

"start": "cross-env NODE_ENV=development npm run webpack --env.browser && cross-env NODE_ENV=development npm run webpack -- --env.server && NODE_ENV=开发 Node 编译/服务器.dev.js",

然后运行命令npm run start

要查看所有目录更改，您应该在 nodemon.json 文件中添加目录名称，例如:

{
    "verbose": false,
    "watch": [
      "app/utils",
      "app/routes.jsx",
      "server",
      "webpack"
    ],
    "exec": "npm run start && node server.dev.js"
}