Question

我正在建立一个带快递的React应用程序。我的服务器工作正常，我的Webpack创建我的js文件没有问题但由于某些原因我的应用程序没有渲染。

这是我的测试应用：

import React from 'react';
import { render } from 'react-dom';
import Application from './Application';

console.log('works!');


function TestApp({}) {
  return (
    <div className="TestApp">Does this work?</div>
  );
}


render(<TestApp />, document.getElementById('root'));

这是我的HTML：

<!DOCTYPE html>
<html>
  <head>
  <title>React Test App</title>
  </head>
  <body>
    <div id="root" />
    <script src="js/bundle.js" async />
  </body>
</html>

这是我的webpack.config.js文件：

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

module.exports = {
  context: path.resolve(__dirname, './app/assets/js/'),
  entry: './bundle',
  output: {
    path: path.resolve(__dirname, './public/assets/js/'),
    filename: 'bundle.js',
    publicPath: "/js/",
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
  ],
  module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      loader: 'eslint-loader',
      exclude: /node_modules/,
    }],
    loaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    }, {
      test: /\.css$/,
      loader: 'style!css',
    }, ]
  },
  watch: true
};

这是我的中间件：

var express = require('express.io');
var app = express();
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var path = require('path');

app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());

var port = process.env.PORT || 8080;

app.set('view engine', 'ejs');

app.use(express.compress());
app.use(express.static(path.join(__dirname, './public/assets')));

app.set('views', path.join(__dirname, './app/views'));

router = express.Router();

  router.get("*", (req, res) => {
    res.render("index.ejs");
  });

  app.use("/", router);

app.listen(port, function (error) {
  return error 
    ? console.error(error) 
    : console.info("Listening on port %s", port);
});

任何线索我可能做错了什么？

Answer 1

您似乎想要使用res.render("index.ejs");

更改res.sendfile("index.html");

编辑：第二个想法; webpack.config.js中的entry字段看起来不正确。它应该指向你的基础javascript文件。您的捆绑包中是否包含当前配置的任何内容？

Answer 2

我知道这篇文章已有 4 年的历史，但通常对于 EJS 扩展使用 res.render()，您不需要添加它。所以放

res.render(index);

应该没问题

为什么不快递渲染我的React应用程序？

2 个答案: