Posso rilevare se il mio script è stato elaborato da Webpack?

Question

Sto cercando di utilizzare il rendering isomorfo in React in modo da poter generare HTML statici come documentazione per la mia applicazione.

Il problema è che ho un componente particolare che gira solo sul client, perché fa riferimento a window. La soluzione è ovvia: non renderlo sul server. Sì, non posso renderlo sul server, ma ancora, ho bisogno che sia incluso nel mio pacchetto webpack così posso renderlo sul client. Il problema è che, il codice che impedisce la mia componente dal rendering sul server è:

function isServer() { 
    return ! (typeof window != 'undefined' && window.document); 
} 

Ma isServer() è anche true quando webpack è bundling, e voglio farlo funzionare normalmente mentre webpack è in esecuzione.

Quindi, come si rileva che webpack è in esecuzione?

Sto cercando qualcosa di simile:

function isWebpack() { 
    // what do I put here? 
} 

ora posso rendere la mia componente client-only normalmente se isServer() e !isWebpack().

Grazie!

EDIT

Questo è il componente che sto cercando di costruire:

function isServer() { 
    return ! (typeof window != 'undefined' && window.document); 
} 

import React from 'react'; 

const LED = React.createClass({ 

    render: function() { 

     if(!isServer()) { 
      var LiveSchemaEditor = require('../../src/components/LiveSchemaEditor.js'); 
      return <LiveSchemaEditor />; 
     } 

     return <div>I AM IN THE SERVER</div>; 
    } 
}); 

export default LED; 

Quello che mi rode è che il fascio webpack include il contenuto del LiveSchemaEditor.js ma esso stampa ancora I AM IN THE SERVER mentre sul client . Questo non ha senso.

Answer 1

mettere questo nella configurazione webpack sotto plugins:

new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: JSON.stringify('production'), 
     APP_ENV: JSON.stringify('browser') 
    } 
}), 

Con che si può verificare se si sta eseguendo in un browser o non in questo modo:

if (process.env.APP_ENV === 'browser') { 
    const doSomething = require('./browser-only-js'); 
    doSomething(); 
} else { 
    const somethingServer = require('./server-only-js'); 
    somethingServer(); 
} 

if (process.env.APP_ENV !== 'browser') { 
    const somethingServer = require('./server-only-js'); 
    somethingServer(); 
} 

Poiché queste variabili d'ambiente ottengono sostituito durante la compilazione, Webpack non includerà le risorse che sono solo server. Dovresti sempre fare questo genere di cose in modo semplice, con un confronto semplice e diretto. Uglify rimuoverà tutto il codice morto.

Poiché è stata utilizzata una funzione in precedenza e la funzione non viene valutata durante la compilazione, Webpack non è stato in grado di sapere che cosa potrebbe saltare.

(Il NODE_ENV -variable dovrebbe sempre essere impostato su production in modalità di produzione, dal momento che molte biblioteche comprese Reagire usarlo per ottimizzazioni.)

Answer 2

Si potrebbe anche fare questo -

typeof __webpack_require__ === 'function' 

Sono supponendo che questo potrebbe cambiare in qualsiasi momento, quindi usare con cautela. :/