javascript - example - browserify vs webpack

¿Cómo uso Browserify con dependencias externas?

Question

Estoy intentando introducir Browserify lentamente en mi sitio, pero no quiero volver a escribir todos los js y no quiero instancias duplicadas de jquery y otras bibliotecas incluidas con mi compilación Browserify.

Si compilo mi módulo enumerando jquery como una dependencia externa, ¿cómo lo apunto a mi instancia de jquery global? También el objetivo es eliminar mylibs global (ejemplo a continuación), así que no quiero usarlo en mi módulo.

Esto es lo que estoy tratando de hacer (psudo-código). Esto estaría en el repositorio de mi sitio, no en el módulo. El módulo se instalaría con Bower:

var mylibs.jQuery = $.noConflict(); // global used by lots of existing code
module.exports = {
    jquery: mylibs.jQuery // can be imported by my module as require(''jquery'')
};

Algo así es lo que estoy tratando de lograr. es posible?

Answer 1

Browserify-shim no es transitivo entre los módulos de nodo: se puede usar para ajustar correctamente los módulos de nivel superior (en su propio package.json), pero no puede ajustar módulos en otros paquetes npm (con sus propios archivos package.json).

Esto es incómodo cuando se trata de un módulo de nodo que depende del módulo jQuery (por ejemplo, un complemento que tiene una dependencia de igual), pero la biblioteca jQuery aún debería ser externa.

Mi solución, similar en concepto al pseudo-código, fue crear un ''shim precarga'' personalizado, con la ayuda de browserify.

1. Excluya el módulo jquery de la generación de bundle.js , pero de lo contrario bundle.js el paquete normalmente.

   Instale los módulos de nodo / npm apropiados para cumplir con los requisitos de compilación. Los módulos "externos" que se excluirán no se incluirán en el paquete, pero se requieren para cumplir con la resolución de dependencia de compilación.

   browserify -x jquery .. > dist/bundle.js

2. Cree un archivo llamado jquery.js e incluya este contenido:

   module.exports = window.jQuery; // or whatever

3. Genera un shim.js incluya solo el archivo anterior.

   browserify -r jquery.js > dist/shim.js

   Luego edite el archivo para usar jQuery como nombre del módulo.

4. En el navegador, cargue jquery (la dependencia externa), shim.js y luego bundle.js .

   Cuando el archivo de paquete intente cargar el módulo jquery, que no define, retrocederá al módulo (previamente) definido en el archivo shim y ejecutará el código personalizado. En este caso, eso es canalizar a través de un global previamente definido.

   O: lo que browserify-shim "global:" intenta hacer, solo en realidad .. globalmente.

El uso directo del módulo browserify (en lugar de gruñido, que estoy volviendo a odiar) puede haber dado como resultado una solución "más refinada".

Answer 2

Esto se puede hacer con un 1-liner:

echo "module.exports=window.jQuery" > node_modules/jquery.js

Agregue 1 línea a su script de compilación para cada dependencia externa. No es necesario pasar ninguna opción especial para Browserify.

Answer 3

Puedes lograr eso usando browserify-shim . Suponiendo que tienes un módulo llamado mymodule.js que depende de jQuery en el ámbito global con los siguientes contenidos:

var $ = require(''jQuery'');

console.log(typeof $);

1. Instale browserify-shim:

   npm install browserify-shim --save-dev

2. En el archivo package.json, dígale a browserify que use browserify-shim como una transformación:

   {
       "browserify": {
           "transform": [ "browserify-shim" ]
       }
   }

3. En el archivo package.json, dígale a browserify-shim que asigne jQuery a jQuery en el ámbito global:

   {
       "browserify-shim": {
           "jQuery": "global:jQuery"
       }
   }

4. Ejecutar browserify

   browserify mymodule.js > bundle.js

Si examina bundle.js notará que se reemplaza require(''jQuery'') con (window.jQuery) .