Nodo.js tutorial in codice di Visual Studio

Nodo.js è una piattaforma per la creazione di applicazioni server veloci e scalabili utilizzando JavaScript. Nodo.js è il runtime e npm è il gestore di pacchetti per il nodo.moduli js.

Visual Studio Code ha il supporto per i linguaggi JavaScript e TypeScript out-of-the-box, nonché Nodo.debug js. Tuttavia, per eseguire un Nodo.applicazione js, è necessario installare il Nodo.js runtime sulla vostra macchina.

Per iniziare in questa procedura dettagliata, installare il nodo.js per la tua piattaforma., Il Gestore Pacchetti Nodo è incluso nel Nodo.distribuzione js. Dovrai aprire un nuovo terminale (prompt dei comandi) per gli strumenti della riga di comando node e npm per essere sul tuo PERCORSO.

Linux: Ci sono Nodi specifici.pacchetti js disponibili per le varie versioni di Linux. Vedere Installazione del nodo.js tramite gestore di pacchetti per trovare il Nodo.pacchetto js e istruzioni di installazione su misura per la versione di Linux.

Suggerimento: per verificare che hai Nodo.,js correttamente installato sul computer, aprire un nuovo terminale e digitare node --help e si dovrebbe vedere la documentazione di utilizzo.

Ciao mondo

Iniziamo creando il Nodo più semplice.applicazione js, “Ciao mondo”.

Crea una cartella vuota chiamata “hello”, naviga dentro e apri il codice VS:

mkdir hellocd hellocode .

Suggerimento: Puoi aprire file o cartelle direttamente dalla riga di comando. Periodo ‘.,’si riferisce alla cartella corrente, quindi il codice VS verrà avviato e aprirà la cartellaHello.

Dal File Explorer barra degli strumenti, premere il pulsante Nuovo File:

e il nome del file app.js:

utilizzando il .js estensione del file, VS Codice interpreta questo file JavaScript e di valutare il contenuto con il linguaggio JavaScript servizio. Fare riferimento all’argomento del linguaggio JavaScript VS Code per ulteriori informazioni sul supporto JavaScript.,

Creare una semplice variabile di stringa app.js e inviare il contenuto della stringa per la console:

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

si noti che quando si digita console. IntelliSense sul console oggetto è stata presentata automaticamente per voi.

Si noti inoltre che VS Code sa chemsgè una stringa basata sull’inizializzazione di 'Hello World'., Se digitimsg. vedrai IntelliSense che mostra tutte le funzioni di stringa disponibili sumsg.

Dopo aver sperimentato con IntelliSense, ripristinare eventuali modifiche aggiuntive dall’esempio di codice sorgente sopra e salvare il file (⌘S (Windows, Linux Ctrl+S)).

Esecuzione di Hello World

È semplice eseguireapp.js con il nodo.js. Da un terminale, basta digitare:

node app.js

Dovresti vedere l’output “Hello World” sul terminale e quindi sul Nodo.,js ritorna.

Terminale integrato

VS Code ha un terminale integrato che è possibile utilizzare per eseguire i comandi della shell. È possibile eseguire il nodo.js direttamente da lì ed evita di uscire dal codice VS durante l’esecuzione di strumenti da riga di comando.

Per questa procedura dettagliata, è possibile utilizzare un terminale esterno o il terminale integrato con codice VS per eseguire gli strumenti della riga di comando.

Debug Hello World

Come menzionato nell’introduzione, VS Code viene fornito con un debugger per Node.applicazioni js. Proviamo a eseguire il debug della nostra semplice applicazione Hello World.,

Per impostare un punto di interruzione in app.js, posizionare il cursore dell’editor sulla prima riga e premere F9 o fare clic sulla grondaia sinistra dell’editor accanto ai numeri di riga. Un cerchio rosso apparirà nella grondaia.

Per avviare il debug, selezionare la vista Esegui nella barra delle attività:

Ora è possibile fare clic su Debug toolbar freccia verde o premere F5 per avviare ed eseguire il debug di “Hello World”. Il punto di interruzione sarà colpito ed è possibile visualizzare e passo attraverso la semplice applicazione., Si noti che VS Code visualizza una barra di stato di colore diverso per indicare che è in modalità di debug e viene visualizzata la CONSOLE di DEBUG.

Ora che hai visto VS Code in azione con “Hello World”, la sezione successiva mostra l’uso di VS Code con un nodo full-stack.app web di js.

Nota: Abbiamo finito con l’esempio” Hello World”, quindi naviga fuori da quella cartella prima di creare un’app Express. È possibile eliminare la cartella “Ciao” se lo si desidera in quanto non è necessaria per il resto della procedura dettagliata.,

Un’applicazione Express

Express è un framework applicativo molto popolare per la creazione e l’esecuzione di nodi.applicazioni js. È possibile impalcare (creare) una nuova applicazione Express utilizzando lo strumento Generatore Express. Il generatore Express viene fornito come modulo npm e installato utilizzando lo strumento della riga di comando npmnpm.

Suggerimento: Per verificare che tu abbia npminstallato correttamente sul tuo computer, digita npm --help da un terminale e dovresti vedere la documentazione di utilizzo.,

Installare il generatore Express eseguendo quanto segue da un terminale:

npm install -g express-generator

Lo switch -g installa il generatore Express a livello globale sulla vostra macchina in modo da poter eseguire da qualsiasi luogo.

ora Possiamo impalcatura di un nuovo Express applicazione, denominata myExpressApp con:

express myExpressApp --view pug

crea una nuova cartella chiamata myExpressApp con il contenuto dell’applicazione., I parametri--view pug indicano al generatore di utilizzare il motore di template pug.

Per installare tutte le dipendenze dell’applicazione (di nuovo fornite come moduli npm), vai alla nuova cartella ed esegui npm install:

cd myExpressAppnpm install

A questo punto, dovremmo verificare che la nostra applicazione funzioni. L’applicazione Express generata ha un filepackage.json che include uno scriptstart per eseguirenode ./bin/www. Questo avvierà il Nodo.applicazione js in esecuzione.,

Da un terminale nella cartella dell’applicazione Express, eseguire:

npm start

Il Nodo.js web server verrà avviato e si può passare a http://localhost:3000 per vedere l’applicazione in esecuzione.

Grande modifica del codice

Chiudere il browser e da un terminale nella cartella myExpressApp, arrestare il Nodo.server js premendo CTRL + C.,

Ora lancio VS Codice:

code .

Nota: Se hai utilizzato il VS Codice integrata terminale per installare il generatore di Esprimere e ponteggio app, è possibile aprire il myExpressApp cartella dal running VS Codice di esempio con il File > Aprire la Cartella di comando.

Il Nodo.js e Express documentation fanno un ottimo lavoro spiegando come creare applicazioni ricche utilizzando la piattaforma e il framework., Visual Studio Code vi renderà più produttivi nello sviluppo di questi tipi di applicazioni, fornendo grande modifica del codice e le esperienze di navigazione.

Aprire il file app.js e passare il mouse sopra il Nodo.js oggetto globale __dirname. Si noti come il codice VS comprende che __dirname è una stringa. Ancora più interessante, è possibile ottenere piena IntelliSense contro il Nodo.js quadro. Ad esempio, è possibile richiedere http e ottenere IntelliSense completo rispetto alla classe http mentre si digita il codice di Visual Studio.,

VS Code utilizza file TypeScript type declaration (typings) (ad esempio node.d.ts) per fornire metadati al codice VS sui framework basati su JavaScript che stai consumando nella tua applicazione. I file di dichiarazione di tipo sono scritti in TypeScript in modo che possano esprimere i tipi di dati di parametri e funzioni, consentendo a VS Code di fornire una ricca esperienza IntelliSense. Grazie a una funzione chiamata Automatic Type Acquisition, non devi preoccuparti di scaricare questi file di dichiarazione di tipo, VS Code li installerà automaticamente per te.,

Puoi anche scrivere codice che fa riferimento ai moduli in altri file. Ad esempio, inapp.js è necessario il modulo./routes/index, che esporta una classeExpress.Router. Se si apre IntelliSense su index, è possibile vedere la forma della classe Router.

Debug della tua app Express

Dovrai creare un file di configurazione del debugger launch.json per la tua applicazione Express., Fare clic sull’icona Esegui nella barra delle attività e quindi sull’icona Configura ingranaggio nella parte superiore della vista Esegui per creare un file launch.json predefinito. Selezionare il Nodo.ambiente js assicurando che la proprietàtype inconfigurations sia impostata su"node". Quando il file viene creato per la prima volta, VS Code cercherà in package.json uno script start e utilizzerà quel valore come program (che in questo caso è "${workspaceFolder}\\bin\\www) per la configurazione del programma di avvio.,

{ "version": "0.2.0", "configurations": } 

Salvare il nuovo file e assicurarsi che il programma di avvio sia selezionato nel menu a discesa configurazione nella parte superiore della vista Esegui. Apri app.js e imposta un punto di interruzione nella parte superiore del file in cui viene creato l’oggetto app Express facendo clic nella grondaia a sinistra del numero di riga. Premere F5 per avviare il debug dell’applicazione. VS Code avvierà il server in un nuovo terminale e colpirà il punto di interruzione che abbiamo impostato. Da lì è possibile ispezionare le variabili, creare orologi, e passo attraverso il codice.,

Distribuisci la tua applicazione

Se vuoi imparare come distribuire la tua applicazione Web, controlla i tutorial Distribuzione di applicazioni in Azure in cui mostriamo come eseguire il tuo sito Web in Azure.

C’è molto di più da esplorare con Visual Studio Codice, si prega di provare i seguenti argomenti:

• Impostazioni – Imparare a personalizzare VS Codice per come ti piace lavorare.
• Debugging-Questo è dove il codice VS brilla davvero.
• Video: Introduzione al nodo.debug js-Scopri come collegare a un nodo in esecuzione.processo js.
• Nodo.,js debugging-Scopri di più sul nodo integrato di VS Code.debug js.
• Debug ricette-Esempi per scenari come lato client e contenitore di debug.
• Tasks-Esecuzione di attività con Gulp, Grunt e Jake. Visualizzazione di errori e avvisi.