Come escludere il percorso del codice quando si esegue il bundle con webpack/browserify?

Question

Ho una libreria che può essere utilizzata sia con node.js che con il browser. Sto usando CommonJS per poi pubblicare per la versione web usando webpack. Il mio codice è simile al seguente:

// For browsers use XHR adapter 
if (typeof window !== 'undefined') { 
    // This adapter uses browser's XMLHttpRequest 
    require('./adapters/xhr'); 
} 
// For node use HTTP adapter 
else if (typeof process !== 'undefined') { 
    // This adapter uses node's `http` 
    require('./adapters/http'); 
} 

Il problema che sto incontrando è che quando ho eseguito webpack (browserify avrebbe fatto lo stesso) l'output generato include http insieme con tutti i suoi dipendenze. Ciò si traduce in un file ENORME che non è ottimale per le prestazioni del browser.

La mia domanda è come è possibile escludere il percorso del codice nodo durante l'esecuzione di un modulo di raggruppamento? L'ho risolto temporaneamente utilizzando gli esterni di webpack e tornando indefinito includendo './adapters/http'. Questo non risolve il caso d'uso in cui altri sviluppatori dipendono dalla mia libreria usando CommonJS. La loro build finirà con lo stesso problema a meno che non utilizzi una configurazione di esclusione simile.

Ho cercato di usare envify, mi chiedo solo se c'è un'altra/migliore soluzione.

Grazie!

Answer 1

È possibile utilizzare require.ensure per il frazionamento del fascio. Per esempio

if (typeof window !== 'undefined') { 
    console.log("Loading browser XMLHttpRequest"); 

    require.ensure([], function(require){ 

     // require.ensure creates a bundle split-point 
     require('./adapters/xhr'); 
    }); 
} else if (typeof process !== 'undefined') { 
    console.log("Loading node http"); 

    require.ensure([], function(require){ 

     // require.ensure creates a bundle split-point 
     require('./adapters/http'); 
    }); 
} 

Vedi per ulteriori informazioni e un esempio dell'uso demo here

Answer 2

È possibile utilizzare IgnorePlugin per Webpack. Se si utilizza un file webpack.config.js, usare in questo modo:

var webpack = require('webpack') 

var ignore = new webpack.IgnorePlugin(/^(canvas|mongoose|react)$/) 

module.exports = { 
    //other options goes here 
    plugins: [ignore] 
} 

a spingere ulteriormente, è possibile utilizzare alcune bandiere come process.env.NODE_ENV per controllare il filtro regex di IgnorePlugin

Answer 3

Questo ha funzionato meglio per me

var _process; 

try { 
    _process = eval("process"); // avoid browserify shim 
} catch (e) {} 

var isNode = typeof _process==="object" && _process.toString()==="[object process]"; 

come Nodo torneranno true e non solo il ritorno del browser false, ma browserify non includeranno il suo process shim quando si compila il codice. Di conseguenza, il tuo codice browserizzato sarà più piccolo.

Edit: Ho scritto un pacchetto per gestire questa situazione in modo più pulito: broquire

Answer 4

Al fine di escludere node_modules e nodo nativo le librerie di essere in bundle, è necessario:

1. Aggiungi target: 'node' al tuo webpack.config.js. Questo sarà exclude native node modules (percorso, fs, ecc.) Dall'essere raggruppato.
2. Utilizzare webpack-node-externals per escludere tutti gli altri node_modules.

Così il vostro file di configurazione risultato dovrebbe essere simile:

var nodeExternals = require('webpack-node-externals'); 
... 
module.exports = { 
    ... 
    target: 'node', // in order to ignore built-in modules like path, fs, etc. 
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder 
    ... 
};