javascript - 将 React 与 Express 混合？

Question

我有一个基于 React 的应用程序，在基于 NodeJS 的服务器上运行，并希望允许它在不使用 xhr 的情况下下载非静态文件。

我正在考虑使用 Express，但我不确定如何让它与 React 在同一个容器中共存？谁能建议我该怎么做？我仍在学习 webpack 和 React，但找不到这方面的示例？

React 服务器是通过 webpack 启动的:

node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --port 8081 --hot --inline

使用 webpack-dev-server.js，如下所示:

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

'./src/index.js' 是 React 类型的代码。

Answer 1

免责声明:我自己从未广泛使用过webpack-dev-server(至少没有直接使用过)，但我可以想到两种解决方案。

一种是在webpack-dev-server配置中使用setup。作为stated here :

setup: function(app) {
  // Here you can access the Express app object and add your own custom middleware to it.
  // For example, to define custom handlers for some paths:
  // app.get('/some/path', function(req, res) {
  //   res.json({ custom: 'response' });
  // });
}

或者，我自己使用的一种方法是使用 webpack-dev-middleware ，这是 Express 的中间件。所以基本上，您可以创建自己的 Express 服务器，它具有与 webpack-dev-server 相同的功能。

这是我的一个项目的摘录(其中 app 是 Express 应用程序实例):

// Webpack (only when not running in `production` mode):
if (process.env.NODE_ENV !== 'production') {
  debug('setting up webpack middleware');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const webpackConfig        = require('./webpack.dev');
  const compiler             = require('webpack')(webpackConfig);

  app.use(webpackDevMiddleware(compiler, {
    noInfo     : true,
    publicPath : webpackConfig.output.publicPath
  }));
  app.use(webpackHotMiddleware(compiler));
}