2017-03-08 5 views
0

Je ne peux pas Navigo (npm package) travailler avec Browserify et GulpNavigo non défini lors de l'utilisation Browserify avec gulp

Ma structure de fichiers (incluant uniquement des choses pertinentes)

-index.html 
-build 
    -js 
     -modules.js 
     -routing.js 
-js 
    -modules.js 

Ma tâche de paquet dans mon gulpfile. js que browserify utilise pour pouvoir utiliser Navigo dans mon dossier routing.js réel

gulp.task('bundlemods', function() { 
    var bundleMods = browserify('./js/modules.js') 
    .bundle() 
    .on('error', console.error) 
    .pipe(source('modules.js')) 
    .pipe(gulp.dest('./build/js')); 
}); 

qui sort the following modules.js file

Alors dans mes routing.js je suis juste essayer d'utiliser Navigo comme suit:

function initRouting() { 
    var rootUrl = null; 
    var useHash = false; 
    var router = new Navigo(rootUrl, useHash); 

    router.on(function() { 
     runHome(); 
    }) 
    .resolve(); 
} 

Cependant, cela donne l'erreur Uncaught ReferenceError: Navigo is not defined

Aussi voici comment mon apparence fichier index.html (pertinentes pièces encore une fois)

<!doctype html> 
<html> 
<head> 
/* stuff */ 
</head> 
<body> 
    <main> 
     /* stuff */ 
    </main> 
    <script src="build/js/modules.js"></script> 
    <script src="build/js/routing.js"></script> 
    /* other scripts */ 
</body> 
</html> 

Quelle est la raison pour laquelle il est encore indéfini? Comment utiliser Navigo une fois que j'ai utilisé Browserify pour générer mon fichier de modules? Cela a-t-il quelque chose à voir avec les étendues globales ou quelque chose d'autre qui me manque?

+0

postez votre repo ou quelque chose, semble que vous n'êtes pas «exigeant» des paquets de la bonne façon –

+0

On dirait que le besoin était correct mais je l'ai simplement raté en ne l'incluant pas dans la portée globale. Eeeeeeheheh ... – Clanket

Répondre

1

Bien sûr, le navigateur empêche les fuites de variables dans la portée globale. Si vous voulez avoir gloabally disponible vous devez attacher explicitement à la portée mondiale:

Navigo = require('navigo'); 

ne pas utiliser var clé grèvera Navigo var à portée globale et quand vous browserify, votre globale sera fenêtre et Navigo est disponible à partir de n'importe où.

Si vous ne voulez pas souiller la portée mondiale alors vous pouvez avoir besoin dans routing.js:

var Navigo = require('navigo'); 
function initRouting() { 
    var rootUrl = null; 
    var useHash = false; 
    var router = new Navigo(rootUrl, useHash); 

    router.on(function() { 
     runHome(); 
    }) 
    .resolve(); 
} 

puis browserify ce fichier au lieu.

+1

Toi, mon cher monsieur, suis mon sauveur. Wow, j'ai eu tellement de problèmes en cours de route pour que tout fonctionne que j'ai raté quelque chose d'aussi simple que ça. Merci beaucoup! Aussi étonnante réponse qui explique et non seulement pousse la réponse dans mon visage: D – Clanket

+0

@ Clanket, Glad it helps. – dNitro