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: './'
  }
};

＆＃39; ./ src / index.js＆＃39;是React类型代码。

Answer 1

免责声明：我从未广泛使用webpack-dev-server（至少不是直接使用），但我可以想到两种解决方案。

一种是在setup配置中使用webpack-dev-server。正如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));
}

Answer 2

除了@ robertklep的回答，基于一些进一步的研究，你可以“编译”你的React项目，然后只使用没有nodejs的那些资源。

使用节点＆amp; webpack来“编译”你的项目：

node node_modules/.bin/webpack

这将创建一个包含已编译项目的bundle.js文件。其他文件，例如图像，外部Javascript和样式表，需要复制，例如（假设有一个dist文件夹）：

cp bundle.js dist/
cp index.html dist/
cp -rf img css frameworks dist/

然后，dist文件夹中的所有内容都可以通过传统的Web服务器（如Nginx或Apache）与NodeJS一起提供。

将React与Express混合使用？

2 个答案: