我有一个我认为不太独特的用例,但我遇到了挑战。我的应用程序是用express/EJS编写的,在端口35上运行,我想包括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 的 Web 服务器方面(如果有的话)?或者只是使用节点?
这是 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;
以下是 package.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"
},