¿Cómo uso Browserify con dependencias externas?

Estoy tratando de introducir lentamente Browserify en mi sitio, pero no quiero reescribir todo el js y no quiero instancias duplicadas de jquery y otras bibliotecas incluidas con mi Browserify construir.

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

Esto es lo que estoy tratando de hacer (código psudo). Este 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 esto posible?

Author: cobbdb, 2014-04-17
Source

2 answers

Puedes lograrlo usando browserify-shim. Suponiendo que tienes un módulo llamado mymodule.js que depende de jQuery en el ámbito global con el siguiente contenido: 

var $ = require('jQuery');

console.log(typeof $);

  1. Instalar browserify-shim: 

    npm install browserify-shim --save-dev

  2. En el paquete.json, dile a browserify que use browserify-shim como una transformación:

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

  3. En el paquete.json, dile a browserify-shim que asigne jQuery al jQuery en el alcance:

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

  4. Ejecutar browserify 

    browserify mymodule.js > bundle.js

Si examina bundle.js notará que require('jQuery') se sustituye por (window.jQuery).

 68
Author: katranci,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-17 09:12:27

Browserify-shim no es transitivo a través de módulos de nodo: se puede usar para shim correctamente de nivel superior (en su propio paquete.json), pero no puede shim módulos en otros paquetes npm (con su propio paquete.archivos json).

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

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

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

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

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

  2. Crea un archivo llamado jquery.js e include this contenido:

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

  3. Genera un shim.jsincluyendo solo el archivo anterior.

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

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

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

    Cuando el archivo bundle intenta cargar el módulo de jquery - que no define - recurrirá al módulo (previamente) definido en el archivo shim y ejecutará el código personalizado. En este caso que es la tubería a través de a global previamente definido.

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

Usar el módulo browserify directamente, en lugar de grunt, que estoy volviendo a odiar, puede haber resultado en una solución "más refinada".

 9
Author: user2864740,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-17 22:34:58