0

Webpack を使用してクライアントコードとサーバーコードの両方のバンドルを作成するユニバーサル React プロジェクトを構成しています。

これは、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をインポートするため、これは失敗します。次に例を示します。

ソース/共有/コンポーネント/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 構成が本番コードにできるだけ少ないように最小限の構成が設定されていることが気に入っています。

私は結果にかなり興奮しています。クライアント バンドルは最新の v3 ベータ版に支えられておりreact-hot-loader、素晴らしい HMR エクスペリエンスを提供しています。サーバー バンドルはファイルの変更時に再構築されるため、サーバーを手動で再起動する必要もありません。かなり甘い開発体験を実現します。

私はこれをボイラープレートに投げ込むつもりです (はい、私は知っていますが、さらに別のものです) が、おそらく他の誰かに役立つでしょう.

4

1 に答える 1

1

構成から必要なすべてを実現する実用的なソリューションを作成しました。

それはすべて、次の定型リポジトリ内にあります: https://github.com/ctrlplusb/react-universally

于 2016-06-20T16:32:57.017 に答える