javascript - org - webpack-- w

¿Cómo puedo excluir la ruta del código al agrupar con webpack/browserify?

Question

Tengo una biblioteca que se puede usar tanto con node.js como con el navegador. Estoy usando CommonJS y luego publico para la versión web usando webpack. Mi código se ve así:

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

El problema que me encuentro es que cuando ejecuto webpack (browserify haría lo mismo) el resultado generado incluye http junto con todas sus dependencias. Esto da como resultado un archivo ENORME que no es óptimo para el rendimiento del navegador.

Mi pregunta es ¿cómo puedo excluir la ruta del código de nodo cuando ejecuto un agrupador de módulos? Resolví esto temporalmente usando los elementos externos de webpack y simplemente volviendo indefinido al incluir ''./adapters/http'' . Esto no resuelve el caso de uso donde otros desarrolladores dependen de mi biblioteca usando CommonJS. Su compilación terminará con el mismo problema a menos que utilicen configuraciones de exclusión similares.

He analizado el uso de envify, solo me pregunto si hay otra solución mejor.

¡Gracias!

Answer 1

Esto funciono mejor para mi

var _process;

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

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

como Node devolverá true y no solo el navegador devolverá false , sino que browserify no incluirá su process compilación cuando compile su código. Como resultado, su código de navegación será más pequeño.

Edit : escribí un paquete para manejar esto de manera más limpia: broquire

Answer 2

Para excluir que los node_modules y las bibliotecas de nodo nativo no se incluyan, debe:

1. Agregue target: ''node'' a su webpack.config.js . Esto excluirá que los módulos de nodo nativos (ruta, fs, etc.) sean agrupados.
2. Utilice webpack-node-externals para excluir todos los demás node_modules .

Entonces tu archivo de configuración de resultados debería verse como:

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

Answer 3

Puede utilizar IgnorePlugin para Webpack. Si está utilizando un archivo webpack.config.js, utilícelo así:

var webpack = require(''webpack'')

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

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

Para seguir avanzando, puede usar algunos indicadores como process.env.NODE_ENV para controlar el filtro de expresiones regulares de IgnorePlugin

Answer 4

Puede utilizar require.ensure para la división de paquetes. Por ejemplo

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

Consulte la división de códigos para obtener más información y una muestra de uso de demostración here