web-dev-qa-db-fra.com

Comment utiliser Browserify avec des dépendances externes?

J'essaie d'introduire lentement Browserify dans mon site, mais je ne veux pas réécrire tous les js et je ne veux pas d'instances en double de jquery et d'autres bibliothèques fournies avec ma build Browserify.

Si je crée mon module listant jquery comme une dépendance externe, comment puis-je le diriger vers mon instance globale de jquery? Le but est également d'éliminer le mylibs global (exemple ci-dessous), donc je ne veux pas l'utiliser dans mon module.

C'est ce que j'essaie de faire (psudo-code). Ce serait dans le dépôt de mon site - pas dans celui du module. Le module serait installé avec 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')
};

Quelque chose comme ça, c'est ce que j'essaie de réaliser. Est-ce possible?

javascriptjqueryperformanceintegrationbrowserify
43
cobbdb

Vous pouvez y parvenir en utilisant browserify-shim . En supposant que vous avez un module nommé mymodule.js Qui dépend de jQuery dans la portée globale avec le contenu suivant:

var $ = require('jQuery');

console.log(typeof $);

  1. Installez browserify-shim:

    npm install browserify-shim --save-dev

  2. Dans le fichier package.json, indiquez à browserify d'utiliser browserify-shim comme transformation:

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

  3. Dans le fichier package.json, indiquez à browserify-shim de mapper jQuery à jQuery dans la portée globale:

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

  4. Exécutez browserify

    browserify mymodule.js > bundle.js

Si vous examinez bundle.js, vous remarquerez que require('jQuery') est remplacé par (window.jQuery).

70
katranci

Browserify-shim n'est pas transitif entre les modules de nœud: il peut être utilisé pour shim correctement les modules de niveau supérieur (dans votre propre package.json), mais il ne peut pas shim des modules dans d'autres packages npm (avec leurs propres fichiers package.json).

C'est gênant lorsqu'il s'agit d'un module de nœud qui dépend du module jQuery (par exemple, un plugin qui a une dépendance entre pairs), mais la bibliothèque jQuery doit toujours être externe.

Ma solution - similaire dans son concept au pseudo-code - a été de créer un 'shim de précharge' personnalisé, à l'aide de browserify lui-même.

  1. Exclure le module jquery de la génération de bundle.js, mais sinon construisez le bundle normalement.

    Installez les modules node/npm appropriés pour répondre aux exigences de construction. Les modules "externes" à exclure seront pas inclus dans le bundle mais sont requis pour respecter la résolution de dépendance de compilation.

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

  2. Créez un fichier appelé jquery.js et incluez ce contenu:

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

  3. Générez un shim.js y compris juste le fichier précédent.

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

    Modifiez ensuite le fichier pour utiliser jQuery comme nom de module.

  4. Dans le navigateur, chargez jquery (la dépendance externe), shim.js, et alors bundle.js.

    Lorsque le fichier de bundle essaie de charger le module jquery - qu'il ne définit pas - il reviendra au module (précédemment) défini dans le fichier shim et exécutera le code personnalisé. Dans ce cas, cela passe par un global défini précédemment.

    Ou: ce que browserify-shim "global:" essaie de faire, seulement en fait .. globalement.

L'utilisation directe du module browserify - au lieu de grogner, que je repousse pour détester - peut avoir abouti à une solution "plus raffinée".

9
user2864740