web-dev-qa-db-ger.com

Wie kann ich den Codepfad beim Bündeln mit Webpack/browserify ausschließen?

Ich habe eine Bibliothek, die sowohl mit node.js als auch mit dem Browser verwendet werden kann. Ich verwende CommonJS und veröffentliche dann die Webversion mit Webpack. Mein Code sieht so aus:

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

Das Problem, dem ich begegne, ist, dass die generierte Ausgabe bei der Ausführung von webpack (browserify würde dasselbe tun) http mit allen Abhängigkeiten enthält. Dies führt zu einer riesigen Datei, die für die Browserleistung nicht optimal ist.

Meine Frage ist, wie ich den Knotencode-Pfad ausschließen kann, wenn ein Modulbündler ausgeführt wird. Ich habe dieses Problem vorübergehend gelöst, indem ich externe Webpacks verwendet habe und bei der Eingabe von './adapters/http' nur undefined zurückgegeben habe. Dies löst den Anwendungsfall nicht, bei dem andere Entwickler von meiner Bibliothek mit CommonJS abhängig sind. Ihr Build wird mit dem gleichen Problem enden, es sei denn, sie verwenden eine ähnliche ausschließende Konfiguration.

Ich habe mir envify angeschaut und habe mich nur gefragt, ob es eine andere/bessere Lösung gibt.

Vielen Dank!

javascriptnode.jsbuildwebpack
21
mzabriskie

Sie können IgnorePlugin für Webpack verwenden. Wenn Sie eine webpack.config.js-Datei verwenden, verwenden Sie diese wie folgt:

var webpack = require('webpack')

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

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

Um es weiter zu drücken, können Sie einige Flags wie process.env.NODE_ENV verwenden, um den Regex-Filter von IgnorePlugin zu steuern

21
daizhuoxian

Um node_modules und native Knotenbibliotheken von der Bündelung auszuschließen, müssen Sie:

  1. Fügen Sie target: 'node' zu Ihrem webpack.config.js hinzu. Dadurch werden native Knotenmodule (Pfad, fs usw.) von der Bündelung ausgeschlossen.
  2. Verwenden Sie webpack-node-externals , um alle anderen node_modules auszuschließen.

Ihre Ergebnis-Konfigurationsdatei sollte also so aussehen:

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

Das hat für mich am besten funktioniert

var _process;

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

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

node gibt true zurück und der Browser gibt nicht nur false zurück, sondern browserify wird bei der Kompilierung des Codes kein process-Shim enthalten. Ihr browserfähiger Code wird daher kleiner sein.

Edit: Ich habe ein Paket geschrieben, um dies sauberer zu behandeln: broquire

1
Steven Vachon

Sie können require.ensure für die Bündelaufteilung verwenden. Zum Beispiel

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

Siehe Code Splitting für weitere Informationen und eine Beispiel-Demo-Verwendung hier

0
trekforever