Zelfstudie: Node.js voor beginners

Als u nog geen ervaring hebt met het gebruik van Node.js, helpt deze handleiding u om aan de slag te gaan met enkele basisprincipes.

• Probeer Node.js te gebruiken in Visual Studio Code
• Uw eerste Node.js-web-app maken met Express
• een Node.js module gebruiken

Vereiste voorwaarden

• Installeren op Node.js op Windows of op Windows Subsystem voor Linux

NodeJS uitproberen met Visual Studio Code

Als u Visual Studio Code nog niet hebt geïnstalleerd, gaat u terug naar de bovenstaande vereiste sectie en volgt u de installatiestappen die zijn gekoppeld aan Windows of WSL.

1. Open je opdrachtprompt en maak een nieuwe map: mkdir HelloNode, en ga naar de map: cd HelloNode

2. Open de map in VS Code met behulp van de opdracht: code .

3. Maak een bestand met de naam 'app.js'

4. Voeg een eenvoudige tekenreeks 'Hallo wereld' toe aan een variabele met de naam msgen verzend de inhoud van de tekenreeks naar uw console door dit in te voeren in het bestand 'app.js':

   var msg = 'Hello World';
   console.log(msg);
   

5. Uw "app.js" bestand uitvoeren met Node.js. Open uw terminal in VS Code door View>Terminal te selecteren (of Ctrl+' te selecteren met behulp van het backtickteken). Als u de standaardterminal wilt wijzigen, selecteert u de vervolgkeuzelijst en kiest u Standaardshell selecteren.

6. Voer in de terminal het volgende in: node app.js. Je zou de uitvoer moeten zien: "Hallo Wereld".

Notitie

Wanneer u console typt in uw 'app.js'-bestand, geeft VS Code ondersteunde opties weer met betrekking tot het console-object waarmee u met IntelliSense kunt kiezen. Experimenteer met IntelliSense met behulp van andere JavaScript-objecten.

Uw eerste NodeJS-web-app maken met Express

Express is een minimaal, flexibel en gestroomlijnd Node.js framework waarmee u eenvoudiger een web-app kunt ontwikkelen die meerdere typen aanvragen kan verwerken, zoals GET, PUT, POST en DELETE. Express wordt geleverd met een toepassingsgenerator waarmee automatisch een bestandsarchitectuur voor uw app wordt gemaakt.

Een project maken met Express.js:

1. Open de opdrachtregel (opdrachtprompt, Powershell of wat u wilt).

2. Maak een nieuwe projectmap: mkdir ExpressProjects en ga naar die map: cd ExpressProjects

3. Express gebruiken om een HelloWorld-projectsjabloon te maken: npx express-generator HelloWorld --view=pug

   Notitie

   We gebruiken de npx opdracht hier om het Express.js Node-pakket uit te voeren zonder het daadwerkelijk te installeren (of door het tijdelijk te installeren, afhankelijk van hoe u het wilt bedenken). Als u de express opdracht probeert te gebruiken of de versie van Express controleert die is geïnstalleerd met: express --version, ontvangt u een antwoord dat Express niet kan worden gevonden. Als u Express wereldwijd wilt installeren om telkens opnieuw te gebruiken, gebruikt u: npm install -g express-generator. U kunt een lijst weergeven met de pakketten die door npm zijn geïnstalleerd met behulp van npm list. Ze worden weergegeven in volgorde van diepte (het aantal geneste directories of mappen). Pakketten die u hebt geïnstalleerd, bevinden zich op diepte 0. De afhankelijkheden van dat pakket zijn op diepte 1, verdere afhankelijkheden op diepte 2, enzovoort. Zie Verschil tussen npx en npm in StackOverflow voor meer informatie.

4. Bekijk de bestanden en mappen die Express heeft opgenomen door het project te openen in VS Code, met: code .

   De bestanden die Express genereert, maken een web-app die gebruikmaakt van een architectuur die in het begin een beetje overweldigend kan lijken. U ziet in uw VS Code Explorer-venster (Ctrl+Shift+E om te bekijken) dat de volgende bestanden en mappen zijn gegenereerd:

   • bin. Bevat het uitvoerbare bestand waarmee uw app wordt gestart. Er wordt een server geactiveerd (op poort 3000 als er geen alternatief wordt opgegeven) en er wordt een eenvoudige foutafhandeling ingesteld.
   • public. Bevat alle openbaar geopende bestanden, waaronder JavaScript-bestanden, CSS-opmaakmodellen, lettertypebestanden, afbeeldingen en andere assets die mensen nodig hebben wanneer ze verbinding maken met uw website.
   • routes. Bevat alle route-handlers voor de toepassing. Er worden automatisch twee bestanden index.jsusers.jsgegenereerd in deze map om te fungeren als voorbeelden van het scheiden van de routeconfiguratie van uw toepassing.
   • views. Bevat de bestanden die door de sjabloonengine worden gebruikt. Express is geconfigureerd om hier te zoeken naar een overeenkomende weergave wanneer de rendermethode wordt aangeroepen. De standaardsjabloon-engine is Jade, maar Jade is afgeschaft ten gunste van Pug, dus we hebben de --view vlag gebruikt om de weergave-engine (sjabloon) te wijzigen. U kunt de --view vlagopties en anderen zien met behulp van express --help.
   • app.js. Het beginpunt van uw app. Het laadt alles en begint met het verwerken van gebruikersaanvragen. Het is eigenlijk de lijm die alle onderdelen bij elkaar houdt.
   • package.json. Bevat de projectbeschrijving, scriptbeheer en app-manifest. Het belangrijkste doel is om de afhankelijkheden van uw app en hun respectieve versies bij te houden.

5. U moet nu de afhankelijkheden installeren die Express gebruikt om uw HelloWorld Express-app te bouwen en uit te voeren (de pakketten die worden gebruikt voor taken zoals het uitvoeren van de server, zoals gedefinieerd in het package.json bestand). Open uw terminal in VS Code door View>Terminal te selecteren (of Ctrl+' te selecteren, met behulp van het backtick-teken), zorg ervoor dat u zich nog steeds in de projectmap 'HelloWorld' bevindt. Installeer de Afhankelijkheden van het Express-pakket met:

   npm install
   

6. Op dit moment hebt u het framework ingesteld voor een web-app met meerdere pagina's die toegang heeft tot een groot aantal API's en HTTP-hulpprogramma's en middleware, waardoor het eenvoudiger is om een robuuste API te maken. Start de Express-app op een virtuele server door het volgende in te voeren:

   npx cross-env DEBUG=HelloWorld:* npm start
   

   Tip

   Het DEBUG=myapp:* deel van de bovenstaande opdracht betekent dat u Node.js vertelt dat u logboekregistratie wilt inschakelen voor foutopsporingsdoeleinden. Vergeet niet om 'myapp' te vervangen door de naam van uw app. U vindt de naam van uw app in het package.json bestand onder de eigenschap 'naam'. Met behulp van npx cross-env stelt u de DEBUG omgevingsvariabele in elke terminal in, maar u kunt deze ook instellen met uw terminalspecifieke manier. De npm start opdracht geeft npm opdracht om de scripts in uw package.json bestand uit te voeren.

7. U kunt nu de app bekijken door een webbrowser te openen en naar: localhost:3000 te gaan.

   

8. Nu uw HelloWorld Express-app lokaal wordt uitgevoerd in uw browser, probeert u een wijziging aan te brengen door de map 'views' in uw projectmap te openen en het bestand index.pug te selecteren. Zodra het bestand is geopend, wijzig h1= title naar h1= "Hello World!" en selecteer Opslaan (Ctrl+S). Bekijk uw wijziging door de URL localhost:3000 in uw webbrowser te verversen.

9. Als u de Express-app niet meer wilt uitvoeren, voert u in de terminal het volgende in: Ctrl+C

Probeer een Node.js-module te gebruiken

Node.js beschikt over hulpprogramma's waarmee u web-apps aan de serverzijde kunt ontwikkelen, een aantal ingebouwde en nog veel meer beschikbare apps via npm. Deze modules kunnen u helpen bij veel taken:

Werktuig	Gebruikt voor
gm, scherp	Afbeeldingsmanipulatie, waaronder bewerken, formaat wijzigen, compressie, enzovoort, rechtstreeks in uw JavaScript-code
PDFKit	PDF-generatie
validator.js	Tekenreeksvalidatie
imagemin, UglifyJS2	Minificatie
spritesmith	Sprite sheet genereren
Winston	Loggen
commander.js	Opdrachtregeltoepassingen maken

Laten we de ingebouwde besturingssysteemmodule gebruiken om informatie over het besturingssysteem van uw computer op te halen:

1. Open de Node.js CLI in de commandoregel. U ziet de > prompt waarin wordt opgegeven dat u Node.js gebruikt nadat u het volgende hebt ingevoerd: node

2. Voer het volgende in om het besturingssysteem te identificeren dat u momenteel gebruikt (wat een antwoord moet retourneren waarin u weet dat u windows gebruikt): os.platform()

3. Voer het volgende in om de architectuur van uw CPU te controleren: os.arch()

4. Als u de CPU's wilt weergeven die beschikbaar zijn op uw systeem, voert u het volgende in: os.cpus()

5. Verlaat de Node.js CLI door .exit in te voeren of door tweemaal Ctrl+C te selecteren.

   Tip

   U kunt de Node.js OS-module gebruiken om bijvoorbeeld het platform te controleren en een platformspecifieke variabele te retourneren: Win32/.bat voor Windows-ontwikkeling, darwin/.sh voor Mac/unix, Linux, SunOS, enzovoort (bijvoorbeeld var isWin = process.platform === "win32";).