同构React Node.js服务器端渲染示例错误

时间:2018-08-01 16:19:04

标签: node.js server

因此,我目前正在关注此示例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}`);

0 个答案:

没有答案