0

我配置了一个通用的 React 项目，在该项目中我使用 Webpack 为客户端和服务器代码创建包。

当我通过定位 Webpack 的捆绑输出直接运行服务器时，这工作正常。

 node ./build/server/main.js

但是，当我尝试运行“实时”开发服务器时，我遇到了问题。在这种情况下，我不想以捆绑的服务器文件为目标，而是直接以源文件为目标，这将允许我运行 webpack 热中间件以进行实时代码更改。下面是服务器主文件的精简版本。

src/server/index.js 

import express from 'express'
import universalReactAppMiddleware from './middleware/universalReactApp'

const server = express()

// Get the client bundle webpack configuration.
const webpackClientConfig = require('../../webpack.client.config.js')

// If we are in development mode we will add the webpack hot 
// reloading middleware.
if (process.env.NODE_ENV === 'development') {
  const webpack = require('webpack')
  const clientCompiler = webpack(webpackClientConfig)
  const createWebpackMiddleware = require('webpack-dev-middleware')
  const createWebpackHotMiddleware = require('webpack-hot-middleware')
  server.use(
    createWebpackMiddleware(clientCompiler, {
      noInfo: true,
      publicPath: webpackClientConfig.output.publicPath,
      stats: {
        colors: true,
        hash: false,
        timings: true,
        chunks: false,
        chunkModules: true,
        modules: false
      }
    })
  )
  server.use(
    createWebpackHotMiddleware(clientCompiler)
  )
}

// Configure static serving of our webpack bundled client files.
server.use(
  webpackClientConfig.output.publicPath,
  express.static(webpackClientConfig.output.path))

// Bind our universal react app middleware for all GET requests.
server.get('*', universalReactAppMiddleware)

server.listen(process.env.SERVER_PORT)

现在的一个示例执行是：

NODE_ENV=development babel-node ./src/server

它可以启动，但是在universalReactAppMiddleware处理请求的那一刻，它将尝试为已解析的组件执行服务器渲染。然后这会失败，因为我的一些组件导入图像/css，例如：

src/shared/components/Foo

import './styles.css'
import background from './background.jpg'

function FooComponent() {
  return <img src={background} />
}

电脑说不！

执行后，我的快速服务器抛出异常，提示语法异常。它基本上尝试将 css 和图像导入解析为 Javascript。这些类型的导入依赖于我的 webpack 加载器才能正确运行。

所以现在我正在尝试寻找一种欺骗 Webpack 行为的机制，以便我可以执行这些类型的组件。我正在调查 Pete Hunts webpack-require，但一直遇到困难。

有谁知道适用于这种情况的任何其他方法？

更新 2016/06/15

繁荣！我已经设法在没有任何第三方库帮助我的情况下完成了这项工作。 universal-webpack比以前更酷更干净，webpack-isomorphic-tools但我喜欢我有一个最小的配置设置，其中尽可能少的通用 webpack 配置渗入我的生产代码。

我对结果很满意。客户端捆绑包由最新的react-hot-loaderv3 测试版支持，这给了我很棒的 HMR 体验，我的服务器捆绑包会根据任何文件更改重新构建，因此也不必手动重新启动我的服务器。打造非常甜蜜的开发体验。

我将把它扔进样板（是的，我知道，还有另一个），但也许它对其他人有用。

4

1 回答 1

1

我创建了一个可行的解决方案，可以从配置中实现我想要的一切。

这一切都在以下样板回购： https ://github.com/ctrlplusb/react-universally

于 2016-06-20T16:32:57.017 回答