Isomorph Reagieren mit Webpacks resolve.root-Option

Question

Meine React-App verwendet erfordert relativ zum Stamm meiner JS-Datei mit Webpack resolve.root. I.e. meine Dateistruktur enthält folgende Komponenten:

components 
    App.react.js 
containers 
    AppContainer.react.js 

In AppContainer.react.js, ich habe:

import App from 'components/App.react'; 

Dies funktioniert Client-Seite. Jetzt versuche ich es isomorph zu machen. Wenn ich AppContainer.react.js in meiner server.js benötige, wird components/App.react nicht gefunden. Der Knoten versucht containers/components/App.react.js anzufordern, was nicht existiert. Wie kann ich veranlassen, dass Node relativ zu einem bestimmten Verzeichnis benötigt?

Edit: Meine sieht Verzeichnisstruktur dieses wie:

css/ 
html/ 
js/ 
    components/ 
    App.react.js 
    containers/ 
    AppContainer.react.js 
    main.js <- requires AppContainer 
public/ 
server/ 
    server.js <- requires AppContainer 

Answer 1

Sie könnten https://github.com/halt-hammerzeit/universal-webpack verwenden. Auf diese Weise können Sie Ihre Webpack-Konfiguration beibehalten (z. B. resolve.root und beliebige Aliase) und zusätzlich dazu beitragen, dass Sie sich auf das serverseitige Rendering zubewegen. Die Usage Docs sind ein gutes Beispiel dafür, wie man das einrichten kann.

Answer 2

Sie

versucht haben

import App from '../components/App.react'; 

Answer 3

Wo liegt Datei Ihre server.js? Wenn es sich im selben Verzeichnis befindet wie Ihr 'containers' Ordner, können Sie ./components/App.react tun.

Andernfalls können Sie .. verwenden, um so weit zurückzukommen, wie Sie Ihre Dateien finden müssen.

Examples (relative to server.js): 
./ -> current directory 
../ -> up one directory 
../../ -> up two directories 
etc.. 

Answer 4

Basierend auf der Verzeichnisstruktur ..

import App from '../js/containers/AppContainer.react'; 

ist das, was Sie wollen.

Answer 5

Sie können versuchen, diese babel-Plugin zu verwenden: babel-plugin-module-resolver,

dann .babelrc wie folgt ändern:

{ 
    "plugins": [ 
    ["module-resolver", { 
     "root": ["."], 
     "alias": { 
     "components": "./components" 
     } 
    }] 
    ] 
} 

dann können Sie Ihre Komponente in Ihrem server.js benötigen import App from 'components/App.react';