Supporting webpack abhängige Einfuhren des Knotens dev Server-Ausführung (ein Server React Rendering-Kontext)

Question

Ich habe ein universelles Projekt, bei dem Reagieren konfiguriert I Webpack verwenden Bündel sowohl für das und den Server Code Client zu erstellen.

Das funktioniert gut, wenn ich den Server direkt über das Targeting der gebündelten Ausgabe von Webpack ausführen.

Allerdings habe ich Probleme, wenn ich versuche, einen "Live" -Entwicklungsserver zu betreiben. In diesem Fall möchte ich die gebündelten Serverdateien nicht als Ziel auswählen, sondern ziele direkt auf die Quelldateien ab, wodurch ich die heiße Middleware des Webpacks für Live-Codeänderungen ausführen kann. Unten ist eine abgespeckte Version der Hauptdatei für den Server.

---

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) 

---

Ein Beispiel Ausführung dieser nun sein:

NODE_ENV=development babel-node ./src/server 

Es startet in Ordnung, aber der Moment der universalReactAppMiddleware behandelt eine Anfrage, es wird versucht, Server-Rendering für eine aufgelöste durchzuführen Komponente. Dies fällt dann über, weil einige meiner Komponenten Bilder/CSS importieren, zum Beispiel:

---

src/shared/components/Foo

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

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

---

Computer sagt nein!

Nach der Ausführung gibt mein Express-Server eine Ausnahme aus, die eine unerwartete Syntax sagt. Es versucht grundsätzlich, den CSS- und Image-Import als Javascript zu analysieren. Diese Arten von Importen hängen davon ab, dass meine Webpack-Loader korrekt funktionieren.

---

So, jetzt versuche ich, das Webpack Verhalten von Spoofing für einen Mechanismus zu suchen, so dass ich diese Art von Komponenten ausführen kann. Ich untersuche Pete Hunts webpack-require, habe aber Schwierigkeiten damit.

Kennt jemand andere Ansätze, die für diesen Kontext funktionieren?

---

aktualisieren 2016/06/15

Boom! Ich habe es geschafft, das ohne irgendwelche 3rd-Party-Bibliotheken zu schaffen, um mir zu helfen. universal-webpack ist ziemlich cool und viel sauberer als die vorherigen webpack-isomorphic-tools, aber ich mag, dass ich eine minimale Konfiguration eingerichtet habe, in der so wenig wie möglich der universellen Webpack-Konfiguration in meinen Produktionscode blutet.

Ich bin ziemlich begeistert von den Ergebnissen.Das Client-Paket wird von der neuesten react-hot-loader v3-Beta unterstützt, was mir eine fantastische HMR-Erfahrung beschert, und mein Server-Bundle wird bei jeder Dateiänderung neu erstellt, so dass ich meinen Server auch nicht manuell neu starten muss. Making für eine ziemlich süße Entwicklungserfahrung.

Ich werde dies in ein Boilerplate werfen (ja ich weiß, noch ein anderes), aber vielleicht wird es für jemand anderen nützlich sein.

Answer 1

Ich schuf eine funktionierende Lösung, die alles, was ich von der Konfiguration wollte, erreichte.

Es ist alles im folgenden Text Repo: https://github.com/ctrlplusb/react-universally