Node.js je platforma pro vytváření rychlých a škálovatelných serverových aplikací pomocí JavaScriptu. Uzel.js je runtime a npm je správce balíčků pro Node.js moduly.
Visual Studio Code má podporu pro JavaScript a TypeScript jazyky out-of-the-box, stejně jako uzel.JS ladění. Chcete-li však spustit uzel.JS aplikace, budete muset nainstalovat uzel.js runtime na vašem počítači.
Chcete-li začít v tomto návodu, nainstalujte uzel.js pro vaši platformu., Správce balíčků uzlů je součástí uzlu.JS distribuce. Budete muset otevřít nový terminál (příkazový řádek) pro node a npm nástroje příkazového řádku, aby se na vaší cestě.
Linux: existují specifické uzly.JS balíčky jsou k dispozici pro různé příchutě Linuxu. Viz Instalace Uzlu.js přes správce balíčků najít uzel.js balíček a návod k instalaci na míru vaší verzi Linuxu.
Tip: Chcete-li otestovat, že máte uzel.,js správně nainstalován v počítači, otevřete nový terminál a zadejte
node --helpa měli byste vidět dokumentaci k použití.
Hello World
začněme vytvořením nejjednoduššího uzlu.js aplikace, „Hello World“.
Vytvořte prázdnou složku s názvem „ahoj“, přejděte na a otevřete VS Kód:
mkdir hellocd hellocode .Tip: můžete otevřít soubory nebo složky přímo z příkazového řádku. Období ‚.,“odkazuje na aktuální složku, proto se VS kód spustí a otevře složku
Hello.
File Explorer panel nástrojů, stiskněte tlačítko Nový Soubor:
název souboru app.js:
pomocí .js souboru, VS Kód interpretuje tento soubor jako JavaScript a zhodnotí obsah s JavaScript jazyk služby. Další informace o podpoře JavaScriptu naleznete v tématu jazyka vs kód JavaScript.,
Vytvořit jednoduchý řetězec proměnná v app.js a odeslat obsah řetězec na konzoli:
var msg = 'Hello World';console.log(msg);Všimněte si, že když jste zadali console. IntelliSense na console objekt byl automaticky prezentovány na vás.
všimněte si Také, že VS Kódu ví, že msg je řetězec, na základě inicializace 'Hello World'., Pokud zadáte msg. uvidíte IntelliSense zobrazující všechny funkce řetězce dostupné na msg.
Poté, co experimentoval s IntelliSense, vrátit žádné extra změny od zdroje příklad kódu výše a uložte soubor (⌘S (Windows, Linux Ctrl+S)).
Běh Hello World
je jednoduché spustit app.js s uzlem.js. Z terminálu, stačí napsat:
node app.jsměli Byste vidět „Hello World“ výstup do terminálu a pak Uzel.,js se vrací.
integrovaný terminál
vs kód má integrovaný terminál, který můžete použít ke spuštění příkazů shellu. Můžete spustit uzel.js přímo odtud a vyhnout se přepínání z VS kódu při spuštění nástrojů příkazového řádku.
Pro tento návod, můžete použít buď externí terminál nebo VS Kódu integrovaného terminálu pro spuštění nástroje příkazového řádku.
ladění Hello World
jak je uvedeno v úvodu, VS kód je dodáván s ladicím programem pro Node.js aplikace. Zkusme ladit naši jednoduchou aplikaci Hello World.,
Chcete-li nastavit zarážku v app.js, dal editor kurzor na prvním řádku a stiskněte klávesu F9 nebo klikněte na tlačítko v editoru levého příkopu vedle čísla linky. V okapu se objeví červený kruh.
spustit ladění, vyberte možnost Zobrazit v Činnosti Baru:
nyní můžete kliknout na tlačítko Debug toolbar zelenou šipku nebo stiskněte klávesu F5 pro spuštění a ladění „Hello World“. Váš bod zlomu bude zasažen a můžete si prohlédnout a projít jednoduchou aplikací., Všimněte si, že VS kód zobrazuje jiný barevný stavový řádek, který označuje, že je v režimu ladění a zobrazí se ladicí konzola.
Nyní, když jste viděli VS Kód v akci s „Hello World“, další část ukazuje pomocí VS Code s full-stack Uzlu.js webová aplikace.
Poznámka: skončili jsme s příkladem „Hello World“, takže před vytvořením Expresní aplikace přejděte z této složky. Složku „Hello“ můžete smazat, pokud si přejete, protože to není nutné pro zbytek návodu.,
Expresní aplikace
Express je velmi populární aplikační rámec pro budování a spuštění uzlu.js aplikace. Pomocí nástroje Express Generator můžete lešení (vytvořit) novou Expresní aplikaci. Expresní Generátor je dodáván jako modul npm a nainstalován pomocí nástroje příkazového řádku npm npm.
Tip: Chcete-li vyzkoušet, že máte
npmsprávně nainstalován na vašem počítači, zadejte:npm --helpz terminálu a měli byste vidět použití dokumentace.,
Instalovat Express Generátor spuštěním následujícího z terminálu:
npm install -g express-generator-g přepínač nainstaluje Express Generátor globálně na vašem počítači, takže můžete spustit odkudkoliv.
nyní můžeme lešení nový Express aplikace s názvem myExpressApp příkazem:
express myExpressApp --view pugtím se vytvoří novou složku s názvem myExpressApp s obsahem vaší aplikace., --view pug parametry říct generátor používat mops šablony motoru.
instalovat všechny aplikace závislostí (opět dodávány jako npm modulů), přejděte do nové složky a spusťte npm install:
cd myExpressAppnpm installV tomto bodě, bychom měli otestovat, že naše aplikace běží. Vygenerovaný Express aplikace má package.json soubor, který obsahuje start skript spustit node ./bin/www. Tím se spustí uzel.js aplikace běží.,
z terminálu ve složce Expresní aplikace spusťte:
npm start
uzel.spustí se webový server js a můžete procházet http://localhost:3000 a zobrazit spuštěnou aplikaci.
Velké úpravy kódu
Zavřete prohlížeč a z terminálu v myExpressApp složka, zastavit Uzel.JS server stisknutím CTRL+C.,
launch VS Kód:
code .Poznámka: Pokud jste pomocí VS Code integrovaného terminálu k instalaci Express generátor a lešení aplikace, můžete otevřít
myExpressAppsložky z vašeho běhu VS Kód instance s Příponou > Otevřít Složku příkaz.
uzel.JS a Express documentation odvádí skvělou práci s vysvětlením, jak vytvářet bohaté aplikace pomocí platformy a rámce., Visual Studio Code vás bude produktivnější při vývoji těchto typů aplikací tím, že poskytuje skvělé úpravy kódu a navigační zkušenosti.
otevřete soubor a umístěte kurzor myši na uzel.js global object __dirname. Všimněte si, jak VS kód chápe, že __dirname je řetězec. Ještě zajímavější je, že můžete získat plnou IntelliSense proti uzlu.js framework. Například, můžete požadovat http a získat plnou IntelliSense proti http třídy, jak píšete Visual Studio kód.,
VS Kód používá Stroji typu prohlášení (typings), soubory (například node.d.ts) poskytovat metadata pro VS Kód o Javascriptu rámce, které je náročné v aplikaci. Soubory deklarace typu jsou napsány v TypeScriptu, takže mohou vyjádřit datové typy parametrů a funkcí, což umožňuje VS kódu poskytnout bohaté zkušenosti IntelliSense. Díky funkci s názvem Automatic Type Acquisition se nemusíte starat o stahování těchto souborů deklarace typu, VS kód je automaticky nainstaluje pro vás.,
můžete také napsat kód, který odkazuje na moduly v jiných souborech. Například v app.js požadujeme ./routes/index modul, který exportuje Express.Router třídy. Pokud vyvoláte IntelliSense na index, můžete vidět tvar třídy Router.
Ladění Express aplikace
Budete muset vytvořit debugger configuration file launch.json pro Expresní aplikaci., Klikněte na ikonu Spustit na panelu aktivit a poté na ikonu konfigurovat ozubené kolo v horní části Zobrazení spustit a vytvořte výchozí soubor launch.json. Vyberte uzel.js prostředí tím, že zajistí, že type nemovitosti v configurations je nastavena na "node". Když soubor je nejprve vytvořen, VS Kód bude vypadat v package.json start scénář, a bude používat tuto hodnotu jako program (což v tomto případě je "${workspaceFolder}\\bin\\www) pro Spuštění Programu konfigurace.,
{ "version": "0.2.0", "configurations": }Uložit nový soubor a ujistěte se, že Spuštění Programu je zvolena v konfiguraci drop-down v horní části Spustit pohled. Otevřete app.js a nastavte bod zlomu v horní části souboru, kde je objekt aplikace Express vytvořen kliknutím do okapu vlevo od čísla řádku. Stisknutím klávesy F5 spustíte ladění aplikace. VS kód spustí server v novém terminálu a zasáhne bod zlomu, který jsme nastavili. Odtud můžete kontrolovat proměnné, vytvářet hodinky a procházet kódem.,
nasaďte aplikaci
Pokud se chcete dozvědět, jak nasadit webovou aplikaci, podívejte se na nasazení aplikací do Azure tutoriálů, kde ukážeme, jak spustit váš web v Azure.
s Visual Studio Code je mnohem více k prozkoumání, zkuste následující témata:
- nastavení-Naučte se přizpůsobit VS kód, jak chcete pracovat.
- ladění-to je místo, kde VS kód opravdu svítí.
- Video: Začínáme s uzlem.JS ladění-Naučte se připojit k běžícímu uzlu.js proces.
- uzel.,JS debugging-další informace o vestavěném uzlu VS kódu.JS ladění.
- ladicí recepty-příklady scénářů, jako je ladění na straně klienta a kontejneru.
- úkoly-běžící úkoly s Gulp, Grunt a Jake. Zobrazení chyb a varování.