Node.js
Utiliser Browserfiy pour résoudre les erreurs "requises" avec les navigateurs

Exemple - fichier.js

Dans cet exemple, nous avons un fichier appelé file.js.

Supposons que vous devez analyser une URL à l'aide de JavaScript et du module de chaîne de requête NodeJS.

Pour ce faire, il vous suffit d'insérer la déclaration suivante dans votre fichier:

const querystring = require('querystring'); 
var ref = querystring.parse("foo=bar&abc=xyz&abc=123");

Que fait cet extrait?

Eh bien, tout d'abord, nous créons un module de chaîne de requête qui fournit des utilitaires pour analyser et formater les chaînes de requête URL. On peut y accéder en utilisant:

const querystring = require('querystring'); 

Ensuite, nous analysons une URL en utilisant la méthode .parse (). Il analyse une chaîne de requête URL (str) dans une collection de paires de clés et de valeurs.

Par exemple, la chaîne de requête 'foo=bar&abc=xyz&abc=123' est analysée en:

{  foo: 'bar',  abc: ['xyz', '123']   }

Malheureusement, les navigateurs ne disposent pas de la méthode require , mais Node.js le fait.

Installer Browserfy

Avec Browserify vous pouvez écrire du code qui utilise nécessitent de la même manière que vous l' utiliser dans le nœud. Alors, comment résolvez-vous cela? C'est simple.

1. Premier noeud d’installation, livré avec npm. Alors fais:

npm install -g browserify

2. Accédez au répertoire dans lequel se trouve votre fichier.js et installez notre module de requête avec npm:

npm install querystring

Remarque: Si vous ne modifiez pas le répertoire spécifique, la commande échouera car elle ne trouve pas le fichier contenant le module.

3. Maintenant regroupez récursivement tous les modules requis en commençant par file.js dans un seul fichier appelé bundle.js (ou tout ce que vous voulez pour le nommer) avec la commande browserify :

browserify file.js -o bundle.js

Browserify analyse l’arbre de syntaxe abstraite pour que les appels require () parcourent l’ensemble du graphe de dépendance de votre

4. Enfin, déposez une seule balise dans votre HTML et vous avez terminé!

<script src="bundle.js"></script>

Ce qui se passe est que vous obtenez une combinaison de votre ancien fichier .js ( fichier.js qui est) et de votre fichier bundle.js nouvellement créé. Ces deux fichiers sont fusionnés en un seul fichier.

Important

Veuillez garder à l'esprit que si vous souhaitez apporter des modifications à votre fichier.js et n'affectera pas le comportement de votre programme. Vos modifications ne prendront effet que si vous éditez le bundle.js nouvellement créé

Qu'est-ce que ça veut dire?

Cela signifie que si vous souhaitez modifier file.js pour quelque raison que ce soit, les modifications n'auront aucun effet. Il faut vraiment éditer bundle.js car c'est une fusion de bundle.js et de file.js.