Comment puis-je exclure le chemin du code lors du regroupement avec le navigateur / navigateur?

J'ai une bibliothèque qui peut être utilisée à la fois avec node.js et le navigateur. J'utilise CommonJS puis publie pour la version web à l'aide du webpack. Mon code ressemble à ceci:

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

Le problème que je rencontre est que lorsque je lance un webpack (le navigateur fera la même chose), la sortie générée inclut http avec toutes ses dépendances. Il en résulte un fichier HUGE qui n'est pas optimal pour les performances du navigateur.

Ma question est de savoir comment puis-je exclure le chemin du code de nœud lors de l'exécution d'un module bundler? Je l'ai résolu temporairement en utilisant les externalités du webpack et je viens de revenir indéfini en incluant './adapters/http' . Cela ne résout pas le cas d'utilisation où d'autres développeurs dépendent de ma bibliothèque en utilisant CommonJS. Leur construction se terminera par le même problème, à moins qu'ils utilisent des configurations exclues similaires.

J'ai cherché à utiliser envient, je me demandais s'il y avait une autre solution / meilleure.

Merci!

Vous pouvez utiliser IgnorePlugin pour Webpack. Si vous utilisez un fichier webpack.config.js, utilisez-le comme ceci:

 var webpack = require('webpack') var ignore = new webpack.IgnorePlugin(/^(canvas|mongoose|react)$/) module.exports = { //other options goes here plugins: [ignore] } 

Pour le pousser plus loin, vous pouvez utiliser certains indicateurs comme process.env.NODE_ENV pour contrôler le filtre regex d'IgnorePlugin

Afin d'exclure les node_modules et les bibliothèques de nœuds natifs, vous devez:

  1. Ajoutez la target: 'node' à votre webpack.config.js . Cela exclut les modules de noeud natifs (chemin, fs, etc.) d'être regroupés.
  2. Utilisez les paramètres webpack-node-extern afin d'exclure tous les autres node_modules .

Ainsi, votre fichier de configuration des résultats devrait ressembler à:

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

Cela a mieux fonctionné pour moi

 var _process; try { _process = eval("process"); // avoid browserify shim } catch (e) {} var isNode = typeof _process==="object" && _process.toString()==="[object process]"; 

Alors que Node renverra true et non seulement le navigateur renverra-t-il false , mais navigateur n'inclura pas sa taille de process lors de la compilation de votre code. Par conséquent, votre code navigué sera plus petit.

Edit : J'ai écrit un paquet pour gérer plus proprement: broquire

Vous pouvez utiliser require.ensure pour le fractionnement du faisceau. Par exemple

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

Voir le fractionnement du code pour plus d'informations et un exemple d'utilisation de démonstration ici