Jak wykluczyć ścieżkę kodu podczas pakowania w pakiecie webpack/browserify?

Question

Mam bibliotekę, która może być używana zarówno z węzłem node.js, jak i przeglądarką. Używam CommonJS, a następnie publikuję dla wersji internetowej za pomocą pakietu internetowego. Mój kod wygląda następująco:

// 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'); 
} 

Problem mam napotykając jest to, że gdy uruchamiam WebPACK (browserify zrobi to samo) wygenerowany wyjściowy zawiera http wraz ze wszystkimi jego zależnościami. Powoduje to powstanie OGROMNEGO pliku, który nie jest optymalny dla wydajności przeglądarki.

Moje pytanie brzmi: jak mogę wykluczyć ścieżkę kodu węzła podczas uruchamiania modułu pakującego? Rozwiązałem to tymczasowo, używając zewnętrznych elementów WebPacka i po prostu wróciłem niezdefiniowany, włączając w to './adapters/http'. Nie rozwiązuje to przypadku użycia, w którym inni programiści zależą od mojej biblioteki za pomocą CommonJS. Ich kompilacja zakończy się tym samym problemem, chyba że użyje podobnej konfiguracji exclude.

Sprawdziłem, jak używać envify, zastanawiając się, czy istnieje inne/lepsze rozwiązanie.

Dzięki!

Answer 1

Możesz użyć require.ensure do podziału pakietów. Na przykład

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'); 
    }); 
} 

Zobacz aby uzyskać więcej informacji i wykorzystanie próbki demo here

Answer 2

można użyć IgnorePlugin dla Webpack. Jeśli używasz pliku webpack.config.js, używać go tak:

var webpack = require('webpack') 

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

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

Aby przesunąć go dalej, można korzystać z niektórych flagi jak process.env.NODE_ENV kontrolować filtr regex z IgnorePlugin

Answer 3

To działało najlepiej dla mnie

var _process; 

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

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

jako węzeł powróci true i nie tylko będzie powrót przeglądarka false, ale browserify nie obejmie swoją process podkładkę podczas kompilacji kodu. W wyniku tego Twój skatalogowany kod będzie mniejszy.

Edit: Napisałem pakiet obsłużyć to bardziej czysty: broquire

Answer 4

W celu wykluczenia node_modules i rodzimy węzła biblioteki przed zestawie, trzeba:

1. Dodaj target: 'node' do listy webpack.config.js. To będzie exclude native node modules (ścieżka, fs, itp.) Z pakietu.
2. Użyj webpack-node-externals w celu wykluczenia wszystkich pozostałych node_modules.

więc plik konfiguracyjny wynik powinien wyglądać następująco:

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 
    ... 
};