同时运行 React 和 Node。

Question

我有一个我认为不太独特的用例，但我遇到了挑战。我拥有的应用程序是用 express/EJS 编写的，并且在端口 35 上运行，我想包含 react，因此我正在按照教程进行操作，并且正在我现有的应用程序中编写此应用程序，并在另一个端口上运行。当两个应用程序位于不同的端口时，我可以看到它们，如果我尝试将它们放在它们冲突的同一个端口上。呃。但是我想在我的应用程序中运行 React 以获得某些功能，我该如何实现呢？如何运行我的节点应用程序并同时做出反应？

我的 react 应用程序的依赖项是：

"babel": "^6.5.2",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"

我的整个依赖树是

 "dependencies": {
    "async": "^2.1.4",
    "babel": "^6.5.2",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "bcrypt-nodejs": "0.0.3",
    "bluebird": "^3.4.6",
    "body-parser": "^1.15.2",
    "cloudinary": "^1.4.6",
    "cookie-parser": "^1.4.3",
    "ejs": "^2.5.2",
    "express": "^4.14.0",
    "express-flash": "0.0.2",
    "express-session": "^1.14.2",
    "method-override": "^2.3.7",
    "moment": "^2.17.0",
    "mongoose": "^4.6.8",
    "morgan": "^1.7.0",
    "multer": "^1.2.0",
    "nodemailer": "^2.7.0",
    "passport-local-mongoose": "^4.0.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "serve-favicon": "^2.3.2",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "xoauth2": "^1.2.0"
  },

顶部列表只是我为教程加载的列表。所以也许要在 Node 中运行 React 我不需要 React 的网络服务器方面，如果有的话？还是只是使用节点？

这是 webpack.config.js 文件。

const webpack =require('webpack'),
path    =require('path');

const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const config =  {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;

这是 pacakge.json 文件中的脚本。这有带有端口的代码等：

  "scripts": {
    "start":"npm run build",
    "build":"webpack -d && sudo cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --host 0.0.0.0 --port 35",
    "build:prod": "webpack -p && cp src/index.html dist/index.html"
  },

Answer 1

要运行 nodejs 和 reactjs 应用程序，只需按照以下步骤操作：

1. npm i 同时 --save

2. 然后将这些脚本添加到你的 nodejs 应用的 composer.json 中，

   "scripts": { "start": "node server.js", //For starting node server with **npm run start** "react": "npm start --prefix react", // --prefix react indicates the folder of your react app "dev": "concurrently \"npm run start\" \"npm run react\"" },

3. 然后添加，

   "proxy": "http://localhost:5000" //Add your own port where nodejs app is running
   
   到你的反应 composer.json 文件。

4. 然后最后运行 npm run dev 来同时启动 react 和 node 应用。

欲了解更多信息，请访问https://www.npmjs.com/package/concurrently。