因此,我目前正在关注此示例https://codeburst.io/headache-free-ssr-react-js-node-js-and-es6-app-boilerplate-tutorial-267f7be0b7b5,该示例介绍了对服务器进行反应的基本实现。 在评论中,由于某些软件包不再受支持,有人发布了一些帮助提示。
但是我仍然遇到错误:
npm错误! ssr-react-node-app@1.0.0 build:watch:server:babel ./app/server -d build/server -- watch
npm错误! ssr-react-node-app@1.0.0 nodemon:build:nodemon ./build/server/index.js
npm错误! ssr-react-node-app@1.0.0 start:dev:run-p -r 'build:watch:server' 'build:watch:client' 'nodemon:build'
This is the error I am Receiving
在我的package.json中,我的脚本如下所示:
"scripts": {
"build:server": "babel ./app/server -d build/server",
"build:watch:server": "babel ./app/server -d build/server -- watch",
"build:client": "webpack --config ./webpack.config.js",
"build:watch:client": "webpack --config ./webpack.config.js/ -- watch",
"nodemon:build": "nodemon ./build/server/index.js",
"start:dev": "run-p -r 'build:watch:server' 'build:watch:client' 'nodemon:build'",
"start:dev:client": "webpack-dev-server"
},
我的webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'inline-source-map',
entry: ['./app/index.js'],
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'app'),
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './app/public/index.html',
filename: 'index.html',
inject: 'body',
}),
],
};
我的服务器/app.js:
import path from 'path';
import express from 'express';
const app = express();
const publicPath = express.static(path.join(__dirname, '../'));
const indexPath = path.join(__dirname, '../index.html');
app.use(publicPath);
app.get('./', (req, res) => {
res.sendFile(indexPath);
})
export default app;
我的服务器/index.js:
import app from './app';
const port = process.env.PORT || 8080;
app.listen(port);
console.log(`Listening at http://localhost:${port}`);