web-dev-qa-db-fra.com

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 je publie pour 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 la même chose), 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!

javascriptnode.jsbuildwebpack
21
mzabriskie

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 aller plus loin, vous pouvez utiliser des indicateurs tels que process.env.NODE_ENV pour contrôler le filtre regex de IgnorePlugin.

21
daizhuoxian

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

  1. Ajoutez target: 'node' à votre webpack.config.js. Ceci exclura les modules de nœud natif (chemin, fs, etc.) de la fusion.
  2. 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 
    ...
};
4
lyosef

Cela a fonctionné mieux pour moi

var _process;

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

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

en tant que nœud renverra 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 mieux gérer ça: broquire

1
Steven Vachon

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

0
trekforever