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:
target: 'node'
à votre webpack.config.js
. Cela exclut les modules de noeud natifs (chemin, fs, etc.) d'être regroupés. 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