Node.js
Browserfiy gebruiken om de 'vereiste' fout met browsers op te lossen

Voorbeeld - file.js

In dit voorbeeld hebben we een bestand met de naam file.js.

Laten we aannemen dat u een URL moet parseren met behulp van de querystringmodule JavaScript en NodeJS.

Om dit te bereiken, hoeft u alleen de volgende verklaring in uw bestand in te voegen:

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

Wat doet dit fragment?

Nou, eerst maken we een querystringmodule die hulpprogramma's biedt voor het parseren en opmaken van URL-queryreeksen. Het is toegankelijk via:

const querystring = require('querystring'); 

Vervolgens ontleden we een URL met de methode .parse (). Het ontleedt een URL-queryreeks (str) in een verzameling sleutel- en waardeparen.

De queryreeks 'foo=bar&abc=xyz&abc=123' wordt bijvoorbeeld ontleed in:

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

Helaas hebben browsers niet de vereiste methode gedefinieerd, maar Node.js wel.

Browserfy installeren

Met Browserify kunt u code die gebruikt vereist op dezelfde manier schrijven als u het in Node zou gebruiken. Dus, hoe los je dit op? Het is makkelijk.

1. Installeer eerst het knooppunt, dat wordt geleverd met npm. Dan doen:

npm install -g browserify

2. Ga naar de map waarin uw file.js zich bevindt en installeer onze querystringmodule met npm:

npm installeer querystring

Opmerking: als u de specifieke map niet wijzigt, mislukt de opdracht omdat deze het bestand met de module niet kan vinden.

3. Bundel nu recursief alle vereiste modules beginnend bij file.js in een enkel bestand genaamd bundle.js (of hoe je het ook wilt noemen) met de opdracht browserify :

browserify file.js -o bundle.js

Browserify ontleedt de abstracte syntaxisboom voor vereisen () -aanroepen om de hele afhankelijkheidsgrafiek van uw te doorlopen

4. Voeg een enkele tag toe aan uw html en u bent klaar!

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

Wat er gebeurt, is dat u een combinatie krijgt van uw oude .js-bestand ( file.js ) en uw nieuw gecreëerde bundle.js- bestand. Die twee bestanden worden samengevoegd tot één enkel bestand.

Belangrijk

Houd er rekening mee dat als u wijzigingen in uw file.js wilt aanbrengen en dit geen invloed heeft op het gedrag van uw programma. Uw wijzigingen worden alleen van kracht als u de nieuw gemaakte bundle.js bewerkt

Wat betekent dat?

Dit betekent dat als u file.js om welke reden dan ook wilt bewerken, de wijzigingen geen effect hebben. Je moet bundle.js echt bewerken , omdat het een bundel is van bundle.js en file.js.