node.js - ExpressJS + Webpack + react 路由器 v4

Question

我正在尝试设置自己的样板来创建 React 应用程序，只是为了了解幕后发生的事情。

我陷入了使用 Webpack/Express/react-router v4 的服务器渲染。只是不知道如何解决。

我的 express.js 文件如下所示:

const express = require('express');
const morgan = require('morgan');
const path = require('path');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const StaticRouter = require('react-router').StaticRouter;
const App = require('./src/app');

const app = express();

// Views
app.set('view engine', 'ejs');
app.set('views', path.resolve(__dirname, 'src', 'templates'))

// Middlewares
app.use(morgan(':method :url :status :res[content-length] - :response-time ms'));
app.use(express.static(path.resolve(__dirname, 'dist')));

// Paths
app.get('*', (req, res) => {
  const context = {}
  const html = ReactDOMServer.renderToString(
    <StaticRouter
      location={req.url}
      context={context}
    >
      <App/>
    </StaticRouter>
  )
  res.render('index', {reactOutput: html});
  // Then in my index.ejs put a <%- reactOutput %> 
});

const port = 8000;
app.listen(port, () => {
  console.log('Listening on port', port);
})

接下来要采取哪些步骤来使其发挥作用？我在想什么:1. 在 webpack.config.js 中为 express.js 定义新条目2. 使用 nodeexpress.bundle.js

启动 Webpack 创建的 express.bundle.js

但是当我尝试运行 webpack -p 时，我收到错误:

ERROR in ./node_modules/express/lib/request.js
Module not found: Error: Can't resolve 'net' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/express/lib'

ERROR in ./node_modules/express/lib/view.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/express/lib'

ERROR in ./node_modules/send/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/send'

ERROR in ./node_modules/etag/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/etag'

ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/destroy'

ERROR in ./node_modules/mime/mime.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/mime'

Answer 1

您应该将 target: 'node' 添加到您的 webpack 配置文件中。

欲了解更多信息，您可以阅读https://webpack.js.org/concepts/targets/