Est-il possible de dépanner des fichiers JS distincts dans le navigateur lors de l'utilisation de Browserify?

Question

Je suis habitué à travailler avec des fichiers JavaScript à l'ancienne façon dont chaque fichier JS possède son propre élément. Par exemple:

<script src="foo.js"></script> 
<script src="bar.js"></script> 

La bonne chose au sujet de l'ancienne méthode est dans Outils Chrome Dev Je peux analyser un fichier JS particulier. Par exemple, si une erreur survient, je sais par exemple regarder dans bar.js. Même en production parce que nous ne faisons pas de liasses.

Je fais des recherches à l'aide Browserify et je ne peux pas trouver comment résoudre un seul fichier JS qui a été fourni à l'aide Browserify.

Question: Est-il possible de résoudre les fichiers distincts JS dans le navigateur lors de l'utilisation Browserify? Si oui, alors comment?

Answer 1

La réponse à cette question est oui. Voici les détails. Supposons que vous ayez 2 fichiers JS:

// main.js 
var unique = require('uniq'); 
var foo = require('./foo.js'); 

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6]; 

console.log(foo(7)); 
console.log("works!"); 

console.log(unique(data)); 

et

// foo.js 
module.exports = function (n) { return n * 111 } 

Utilisez la commande suivante pour générer le fichier fourni et son fichier de mapping:

browserify main.js --debug | exorcist bundle.js.map > bundle.js 

Dans Dev Tools, vous verrez ce (que vous pouvez voir les 2 fichiers sont débogable):