Comment puis-je exclure le chemin du code lors de l’intégration à webpack / browserify?

J’ai une bibliothèque qui peut être utilisée avec node.js et le navigateur. J’utilise CommonJS puis la publication de la version Web à l’aide de 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 webpack (browserify ferait de même), la sortie générée inclut http avec toutes ses dépendances. Cela se traduit par un fichier énorme qui n’est pas optimal pour les performances du navigateur.

Ma question est la suivante: comment puis-je exclure le chemin du code de nœud lors de l’exécution d’un bundler de modules? J’ai résolu ce problème temporairement en utilisant les externals de webpack et en retournant simplement 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 utilisant CommonJS. Leur construction se retrouvera avec le même problème à moins d’utiliser une configuration d’exclusion similaire.

J’ai envisagé d’utiliser envify, en me demandant s’il existe une autre solution / meilleure.

Merci!

Vous pouvez utiliser IgnorePlugin for 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 des indicateurs tels que process.env.NODE_ENV pour contrôler le filtre regex de IgnorePlugin.

Pour exclure les node_modules et les bibliothèques de noeuds natifs, vous devez:

Ajoutez la target: 'node' à votre webpack.config.js . Cela empêchera les modules de nœud natif (chemin, fs, etc.) d’être regroupés.
Utilisez webpack-node-externals afin d’exclure tous les autres node_modules .

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

 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 fonctionné mieux pour moi

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

en tant que nœud retournera true et non seulement le navigateur renverra false , mais browserify n’inclura pas son process shim lors de la compilation de votre code. En conséquence, le code de votre navigateur sera plus petit.

Edit : J’ai écrit un paquet pour gérer cela plus proprement: Broquire

Vous pouvez utiliser require.ensure pour le fractionnement de liasses. 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 la division de code pour plus d’informations et un exemple d’utilisation de la démonstration ici.