Alias ​​Webpack in Node JS Server code

Question

Sto costruendo un'applicazione isomorfa React/React-Router/Redux/Webpack e sto tentando di implementare il rendering lato server.

mio elenco assomiglia:

/client 
    /actions 
    /components 
    /containers 
/server 
    /server.js 

Nel mio webpack config, ho alias impostati per tutte le cartelle all'interno del client:

var path_base = path.resolve(__dirname, '..'); 
const resolve = path.resolve; 
const base = function() { 
    var args = [path_base]; 
    args.push.apply(args, arguments); 
    return resolve.apply(resolve,args); 
}; 
const resolve_alias = base.bind(null, 'src/client'); 
const aliases = [ 
    'actions', 
    'components', 
    'constants', 
    'containers', 
    'middleware', 
    'reducers', 
    'routes', 
    'store', 
    'styles', 
    'utils', 
    'validation' 
]; 

in modo che all'interno del codice che viene fornito in bundle con webpack , Posso fare:

import { Widget } from 'components'; 

e che l'importazione viene risolta dal webpack.

Ora nel mio codice server, per eseguire il rendering, devo importare alcuni dei miei file client, come routes/index.js. Il problema che sto incontrando quando importare il mio file di rotte, è quello di utilizzare un alias di un pacchetto Web in un altro file, ad esempio components o containers quindi, in modo naturale, il nodo js richiede che il sistema non possa risolverlo.

Come aggiustare qualcosa del genere? Ho guardato su this question e si tratta essenzialmente di impostare gli stessi alias esistenti nel webpack con mock-require. Ma poi il problema diventa che il mio file di rotte importa tutti i miei componenti che poi importano cose come fogli di stile, immagini, ecc. Dovrei quindi usare qualcosa come webpack-isomorphic-tools?

Le guide che ho visto (this per esempio) sono tutte ottime per mostrare come viene eseguito il rendering lato server ma nessuno di loro parla realmente di come risolvere tutte le richieste e quant'altro.

Answer 1

Se davvero li vuoi, esegui il tuo codice lato server tramite babel e usa questo plugin: https://www.npmjs.com/package/babel-plugin-module-alias che ti permetterà di fare la stessa cosa del webpack.

Edit: Questo funziona molto meglio: https://github.com/jagrem/babel-resolve-relative-module permette percorsi multipli

Answer 2

tenta di utilizzare NODE_PATH. Il nodo cercherà sempre un modulo in questo percorso durante le chiamate richieste. Permette di abbreviare i percorsi relativi che desideri.

// turn this 
import {Widget} from '../../components'; 

// into this 
import {Widget} from 'components'; 

Vedere Node.js docs per ulteriori informazioni.

P.S. questa cosa è molto sensibile, quindi usala con attenzione. Ora il tuo codice dipende strettamente dall'ambiente e potrebbe rompersi da qualche parte.

Answer 3

Dopo aver combattuto con questo problema per 2 giorni, ho optato per babel-plugin-webpack-alias. What you need to do per risolvere i percorsi con ovvero:

1. $ npm install --save-dev babel-plugin-webpack-alias
2. Aggiungere il plugin per il vostro .babelrc
3. Aggiungi gli alias al vostro webpack.config (assicuratevi di utilizzare path.join())
4. Fare riferimento alla this post se avete problemi di caricamento stili

L'altra opzione che ho provato era universal-webpack ma ho trovato ad essere un po 'prolisso. Se vuoi vedere approssimativamente come funziona l'intero caricamento sul lato server, puoi dare un'occhiata a this video.

Answer 4

Se si utilizzano strumenti web-isomorphic, sarà necessario tenere conto della configurazione del proprio Webpack per il lato server che farà funzionare tutti gli alias.

https://www.npmjs.com/package/webpack-isomorphic-tools