Kurz: Vytvoření aplikace Node.js a React v sadě Visual Studio

V sadě Visual Studio můžete snadno vytvořit projekt Node.js a používat IntelliSense a další integrované funkce, které podporují Node.js. V tomto kurzu vytvoříte projekt webové aplikace Node.js ze šablony sady Visual Studio. Pak vytvoříte jednoduchou aplikaci pomocí Reactu.

V tomto kurzu se naučíte:

Než začnete, podívejte se na stručné nejčastější dotazy, které vás seznámí s některými klíčovými koncepty:

• Co je Node.js?

  Node.js je prostředí javascriptového modulu runtime na straně serveru, které spouští kód JavaScriptu.

• Co je npm?

  Výchozí správce balíčků pro Node.js je npm. Správce balíčků usnadňuje publikování a sdílení knihoven zdrojového kódu Node.js. Správce balíčků npm zjednodušuje instalaci, aktualizaci a odinstalaci knihovny.

• Co je React?

  React je front-endová architektura pro vytvoření uživatelského rozhraní (UI).

• Co je JSX?

  JSX je rozšíření syntaxe JavaScriptu, které se obvykle používá s Reactem k popisu prvků uživatelského rozhraní. Před spuštěním v prohlížeči je nutné transpilovat kód JSX do prostého JavaScriptu.

• Co je Webpack?

  Webpack seskupuje soubory JavaScriptu, aby je bylo možné spustit v prohlížeči, a může také transformovat nebo zabalit další prostředky a prostředky. Webpack může určit kompilátor, například Babel nebo TypeScript, pro transpilování kódu JSX nebo TypeScript do prostého JavaScriptu.

Požadavky

Tento kurz vyžaduje následující požadavky:

• Sada Visual Studio s nainstalovanou úlohou vývoje Node.js

  Pokud jste visual Studio ještě nenainstalovali:

  1. Přejděte na stránku pro stažení sady Visual Studio a nainstalujte si Visual Studio zdarma.

  2. V Instalační program pro Visual Studio vyberte vývojovou úlohu Node.js a vyberte Nainstalovat.

     

  Pokud máte nainstalovanou sadu Visual Studio, ale potřebujete úlohu Node.js:

  1. V sadě Visual Studio přejděte na Nástroje>Získat nástroje a funkce.

  2. V Instalační program pro Visual Studio zvolte úlohu Vývoje Node.js a výběrem možnosti Upravit ji stáhněte a nainstalujte.

• Nainstalovaný modul runtime Node.js:

  Pokud nemáte nainstalovaný modul runtime Node.js, nainstalujte verzi LTS z webu Node.js. Verze LTS má nejlepší kompatibilitu s jinými architekturami a knihovnami.

  Nástroje Node.js v úloze Visual Studio Node.js podporují 32bitové i 64bitové verze architektury Node.js. Visual Studio vyžaduje jenom jednu verzi a instalační program Node.js podporuje vždy jenom jednu verzi.

  Visual Studio obvykle rozpozná nainstalovaný modul runtime Node.js automaticky. Pokud ne, můžete projekt nakonfigurovat tak, aby odkazoval na nainstalovaný modul runtime:

  1. Po vytvoření projektu klikněte pravým tlačítkem myši na uzel projektu a vyberte Vlastnosti.

  2. V podokně Vlastnosti nastavte cestu Node.exe tak, aby odkazovaly na globální nebo místní instalaci Node.js. V každém projektu Node.js můžete zadat cestu k místnímu interpretu.

Vytvoření projektu

Nejprve vytvořte projekt webové aplikace Node.js.

Přidat balíčky npm

Tato aplikace vyžaduje správné spuštění následujících modulů npm:

• react
• react-dom
• express
• path
• ts-loader
• typescript
• webpack
• webpack-cli

Instalace balíčku:

1. V Průzkumník řešení klikněte pravým tlačítkem na uzel npm a vyberte Nainstalovat nové balíčky npm.

2. V dialogovém okně Nainstalovat nové balíčky npm vyhledejte balíček React a vyberte Nainstalovat balíček a nainstalujte ho.

   

   

   V dialogovém okně Nainstalovat nové balíčky npm můžete zvolit instalaci nejnovější verze balíčku nebo určit verzi. Pokud se rozhodnete nainstalovat aktuální verze, ale později dojde k neočekávaným chybám, zkuste nainstalovat přesné verze balíčků uvedené v dalším kroku.

   Okno Výstup v dolním podokně sady Visual Studio zobrazuje průběh instalace balíčku. Otevřete okno Výstup výběrem možnosti Zobrazit>výstup nebo stisknutím kláves Ctrl+Alt+O. V poli Zobrazit výstup v okně Výstup vyberte Npm.

   Po instalaci se balíček React zobrazí pod uzlem npm v Průzkumník řešení.

   Soubor package.json projektu se aktualizuje informacemi o novém balíčku, včetně verze balíčku.

Místo použití uživatelského rozhraní k vyhledání a přidání zbývajících balíčků po jednom můžete vložit požadovaný kód balíčku do souboru package.json.

1. V Průzkumník řešení otevřete soubor package.json v editoru sady Visual Studio. Před konec souboru přidejte následující dependencies oddíl:

   "dependencies": {
     "express": "^4.18.2",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.0.1"
   },
   

   Pokud už soubor obsahuje dependencies oddíl, nahraďte ho předchozím kódem JSON. Další informace o použití souboru package.json najdete v tématu konfigurace package.json.

2. Stisknutím kláves Ctrl+S nebo výběrem> souboru Save package.json uložte změny.

3. V Průzkumník řešení klikněte pravým tlačítkem na uzel npm v projektu a vyberte Nainstalovat balíčky npm.

   Tento příkaz spustí příkaz npm install přímo pro instalaci všech balíčků uvedených v souboru packages.json.

   Výběrem okna Výstup v dolním podokně zobrazíte průběh instalace. Instalace může trvat několik minut a nemusí se zobrazit výsledky okamžitě. Ujistěte se, že jste v okně Výstup vybrali Npm v poli Zobrazit výstup.

   Po instalaci se moduly npm zobrazí v uzlu npm v Průzkumník řešení.

   

   

   Poznámka:

   Balíčky npm můžete nainstalovat také pomocí příkazového řádku. V Průzkumník řešení klikněte pravým tlačítkem myši na název projektu a vyberte Otevřít příkazový řádek zde. K instalaci balíčků použijte standardní příkazy Node.js.

Přidání souborů projektu

V dalším kroku přidejte do projektu čtyři nové soubory.

• app.tsx
• webpack-config.js
• index.html
• tsconfig.json

Nové soubory projektu pro tuto jednoduchou aplikaci přidáte do kořenu projektu. U většiny aplikací přidáte soubory do podsložek a odpovídajícím způsobem upravíte odkazy na relativní cestu.

1. V Průzkumník řešení vyberte název projektu a stiskněte ctrl+ Shift+A nebo klikněte pravým tlačítkem myši na název projektu a vyberte Přidat>novou položku.

   Pokud nevidíte všechny šablony položek, zvolte Zobrazit všechny šablony a pak zvolte šablonu položky.

2. V dialogovém okně Přidat novou položku zvolte Soubor JSX TypeScriptu, zadejte název app.tsx a vyberte Přidat nebo OK.

3. Tento postup opakujte a přidejte soubor JavaScriptu s názvem webpack-config.js.

4. Tento postup opakujte, pokud chcete přidat soubor HTML s názvem index.html.

5. Opakujte tyto kroky a přidejte konfigurační soubor JSON TypeScriptu s názvem tsconfig.json.

Přidání kódu aplikace

1. V Průzkumník řešení otevřete server.js a nahraďte stávající kód následujícím kódem:

   'use strict';
   var path = require('path');
   var express = require('express');
   
   var app = express();
   
   var staticPath = path.join(__dirname, '/');
   app.use(express.static(staticPath));
   
   // Allows you to set port in the project properties.
   app.set('port', process.env.PORT || 3000);
   
   var server = app.listen(app.get('port'), function() {
       console.log('listening');
   });
   

   Uvedený kód spouští Node.js jako server vaší webové aplikace přes Express. Kód nastaví port na číslo portu nakonfigurované ve vlastnostech projektu, což je ve výchozím nastavení 1337. Pokud potřebujete otevřít vlastnosti projektu, klikněte pravým tlačítkem myši na název projektu v Průzkumník řešení a vyberte Vlastnosti.

2. Otevřete app.tsx a přidejte následující kód:

   declare var require: any
   
   var React = require('react');
   var ReactDOM = require('react-dom');
   
   export class Hello extends React.Component {
       render() {
           return (
               <h1>Welcome to React!!</h1>
           );
       }
   }
   
   ReactDOM.render(<Hello />, document.getElementById('root'));
   

   Předchozí kód používá syntaxi JSX a React k zobrazení zprávy.

3. Otevřete index.html a nahraďte body oddíl následujícím kódem:

   <body>
       <div id="root"></div>
       <!-- scripts -->
       <script src="./dist/app-bundle.js"></script>
   </body>
   

   Tato stránka HTML načte app-bundle.js s kódem JSX a React, který bude transpilovaný na prostý JavaScript. Momentálně je soubor app-bundle.js prázdný. V další části nakonfigurujete možnosti pro transpilaci tohoto kódu.

Konfigurace možností webpacku a kompilátoru TypeScriptu

Dále přidáte konfigurační kód webpacku do souboru webpack-config.js. Přidáte jednoduchou konfiguraci webpacku, která určuje vstupní soubor, app.tsx a výstupní soubor app-bundle.js pro sdružování a transpilování JSX do prostého JavaScriptu. Pro transpilaci můžete nakonfigurovat také některé možnosti kompilátoru TypeScriptu. Tento základní konfigurační kód je úvodem do webpacku a kompilátoru TypeScriptu.

1. V Průzkumník řešení otevřete webpack-config.js a přidejte následující kód.

   module.exports = {
       devtool: 'source-map',
       entry: "./app.tsx",
       mode: "development",
       output: {
           filename: "./app-bundle.js"
       },
       resolve: {
           extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
       },
       module: {
           rules: [
               {
                   test: /\.tsx$/,
                   exclude: /(node_modules|bower_components)/,
                   use: {
                       loader: 'ts-loader'
                   }
               }
           ]
       }
   }
   

   Konfigurační kód webpacku dává webpacku pokyn, aby k transpilování JSX použil zavaděč TypeScript.

2. Otevřete soubor tsconfig.json a nahraďte obsah následujícím kódem, který určuje možnosti kompilátoru TypeScriptu:

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "module": "commonjs",
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "jsx": "react"
     },
     "exclude": [
       "node_modules"
     ],
     "files": [
       "app.tsx"
     ]
   }
   

   Kód určuje jako zdrojový soubor soubor app.tsx .

3. Stisknutím kláves Ctrl+Shift+S nebo výběrem možnosti Uložit>vše uložte všechny změny.

Transpilace JSX

1. V Průzkumník řešení klikněte pravým tlačítkem myši na název projektu a vyberte Otevřít příkazový řádek zde.

2. Do příkazového řádku zadejte následující příkaz Webpacku:

   node_modules\.bin\webpack --config webpack-config.js

   V okně příkazového řádku se zobrazí výsledek.

   

   Pokud se místo uvedeného výstupu zobrazují nějaké chyby, je potřeba je před použitím aplikace odstranit. Pokud se verze balíčků npm liší od verzí, které tento kurz určuje, může to způsobit chyby. Pokud chcete chyby opravit, zkuste následující:

   • Pokud jste to ještě neudělali, použijte přesné verze uvedené v předchozím kroku.

     Nebo pokud se stále zobrazují chyby:

   • Nainstalujte nejnovější verze balíčků npm tak, že kliknete pravým tlačítkem na uzel npm v Průzkumník řešení a zvolíte Nainstalovat balíčky npm.

   Pokud jsou některé verze balíčků zastaralé a výsledkem je chyba, možná budete muset nainstalovat novější verzi, abyste opravili chyby. Informace o použití souboru package.json k řízení verzí balíčků npm najdete v tématu konfigurace package.json.

3. V Průzkumník řešení klikněte pravým tlačítkem na uzel projektu a vyberte Přidat>existující složku.

4. Vyberte složku dist a pak vyberte Vybrat složku.

   Visual Studio přidá do projektu složku dist , která obsahuje app-bundle.js a app-bundle.js.map.

5. Otevřete app-bundle.js a zobrazte transpilovaný kód jazyka JavaScript.

6. Pokud se zobrazí výzva k opětovnému načtení externě upravených souborů, vyberte Ano pro vše.

   

Kdykoli provedete změny souboru app.tsx, musíte znovu spustit příkaz Webpack. Pokud chcete tento krok automatizovat, můžete přidat skript sestavení pro transpilování JSX.

Přidání skriptu sestavení pro transpilování JSX

Verze sady Visual Studio počínaje sadou Visual Studio 2019 vyžadují skript sestavení. Místo překladu JSX na příkazovém řádku, jak je znázorněno v předchozí části, můžete při sestavování ze sady Visual Studio transpilovat JSX.

1. Otevřete soubor package.json a za dependencies oddíl přidejte následující oddíl:

   "scripts": {
    "build": "webpack-cli --config webpack-config.js"
   }
   

2. Uloží vaše změny.

Spustit aplikaci

1. Na panelu nástrojů Ladění vyberte jako cíl ladění webový server (Microsoft Edge) nebo webový server (Google Chrome ).

   

   

   Pokud víte, že váš upřednostňovaný cíl ladění je na vašem počítači dostupný, ale nezobrazuje se jako možnost, vyberte v rozevíracím seznamu cíl ladění možnost Procházet . V seznamu vyberte výchozí cíl prohlížeče a vyberte Nastavit jako výchozí.

2. Pokud chcete aplikaci spustit, stiskněte klávesu F5, vyberte zelené tlačítko se šipkou nebo vyberte> Spustit ladění ladění.

   Otevře se okno konzoly Node.js zobrazující port naslouchání ladicího programu.

   Visual Studio spustí danou aplikaci spuštěním spouštěcího souboru server.js.

   

3. Zavřete okno prohlížeče a konzoly.

Nastavení zarážky a spuštění aplikace

Zarážky jsou nejzákladnějším rysem spolehlivého ladění. Zarážka označuje, kde má Visual Studio pozastavit spuštěný kód. Pak můžete sledovat hodnoty proměnných, chování paměti nebo to, jestli je spuštěná větev kódu.

1. V souboru server.js kliknutím do mezery vedle okraje nalevo od deklarace staticPath nastavte zarážku:

   

   

2. Pokud chcete aplikaci spustit, stiskněte klávesu F5 nebo vyberte> Spustit ladění.

   Ladicí program se pozastaví na zarážce, kterou jste nastavili, se zvýrazněným aktuálním příkazem. Teď můžete stav aplikace zkontrolovat tak, že přesunete ukazatel myši nad proměnné v aktuálním rozsahu a použijete okna ladicího programu, například okna Místní hodnoty a Kukátko.

3. Pokud chcete pokračovat ve spuštění aplikace, stiskněte klávesu F5, na panelu nástrojů Ladění vyberte Pokračovat nebo vyberte Pokračovat ladění>.

   Pokud chcete použít Vývojářské nástroje pro Chrome nebo F12 Tools for Microsoft Edge, stiskněte klávesu F12. Tyto nástroje můžete použít k prozkoumání DOM a interakci s aplikací pomocí konzoly JavaScriptu.

4. Zavřete okno prohlížeče a konzoly.

Nastavení a použití zarážky v kódu React na straně klienta

V předchozí části jste připojili ladicí program ke kódu Node.js na straně serveru. Pokud se chcete připojit k zarážce a stisknout je v kódu React na straně klienta, musíte ladicí program připojit ke správnému procesu. Tady je jeden způsob, jak povolit prohlížeč a připojit proces pro ladění.

Povolení ladění v prohlížeči

Můžete použít Microsoft Edge nebo Google Chrome. Zavřete všechna okna pro cílový prohlížeč. Pro Microsoft Edge také vypněte všechny instance Chromu. Vzhledem k tomu, že oba prohlížeče sdílejí základ kódu Chromium, má vypnutí obou prohlížečů nejlepší výsledky.

Jiné instance prohlížeče můžou zabránit otevření prohlížeče s povoleným laděním. Rozšíření prohlížeče můžou zabránit úplnému režimu ladění. Možná budete muset pomocí Správce úloh najít a ukončit všechny spuštěné instance Chromu.

Spuštění prohlížeče s povoleným laděním:

1. V rozevíracím seznamu na panelu nástrojů Ladění vyberte Procházet s.

2. Na obrazovce Procházet s vybraným prohlížečem vyberte Přidat.

3. Do pole Argumenty zadejte příznak --remote-debugging-port=9222.

4. Dejte prohlížeči nový popisný název, například Edge s laděním nebo Chrome s laděním, a pak vyberte OK.

5. Na obrazovce Procházet vyberte Procházet.

   

• Případně můžete příkaz Spustit otevřít tak, že kliknete pravým tlačítkem myši na tlačítko Start systému Windows a zadáte:

  msedge --remote-debugging-port=9222

  nebo

  chrome.exe --remote-debugging-port=9222

Prohlížeč začíná s povoleným laděním. Aplikace ještě není spuštěná, takže stránka prohlížeče je prázdná.

Připojení ladicího programu ke skriptu na straně klienta

1. V editoru sady Visual Studio nastavte zarážku ve zdrojovém kódu app-bundle.js nebo app.tsx .

   • Pro app-bundle.js nastavte zarážku ve render() funkci. Pokud chcete najít render() funkci v souboru app-bundle.js, stiskněte Ctrl+F nebo vyberte Upravit>najít a nahradit>rychlé hledání a zadejte vykreslení do vyhledávacího pole.

     

     

   • V souboru app.tsx nastavte zarážku uvnitř render() funkce v return příkazu.

     

     

     Pokud nastavíte zarážku v souboru app.tsx, aktualizujte také webpack-config.js , aby nahradil následující kód, a uložte změny.

     Nahraďte tento kód:

     output: {
         filename: "./app-bundle.js",
     },
     

     Tímto kódem:

     output: {
         filename: "./app-bundle.js",
         devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
     },
     

     Toto nastavení pouze pro vývoj umožňuje ladění v sadě Visual Studio. Ve výchozím nastavení obsahují odkazy webpacku ve zdrojovém souboru mapy předponu webpack:/// , která sadě Visual Studio brání v vyhledání zdrojového souboru app.tsx. Toto nastavení přepíše vygenerované odkazy v souboru zdrojové mapy app-bundle.js.map při vytváření aplikace. Konkrétně toto nastavení změní odkaz na zdrojový soubor z webpack:///./app.tsx na ./app.tsx, což umožňuje ladění.

2. Vyberte cílový prohlížeč jako cíl ladění v sadě Visual Studio a stiskněte kombinaci kláves Ctrl+F5 nebo vyberte> Spustit spustit bez ladění a spusťte aplikaci v prohlížeči.

   Pokud jste vytvořili konfiguraci prohlížeče s povoleným laděním s popisným názvem, zvolte tento prohlížeč jako cíl ladění.

   Aplikace se otevře na nové kartě prohlížeče.

3. Vyberte Připojit k procesu ladění>nebo stiskněte kombinaci kláves Ctrl+Alt+P.

   Tip

   Jakmile se k procesu poprvé připojíte, můžete se ke stejnému procesu rychle připojit tak, že vyberete >možnost Znovu připojit ladění k procesu nebo stisknete klávesu Shift+Alt+P.

4. V dialogovém okně Připojit k procesu získejte filtrovaný seznam instancí prohlížeče, ke kterým se můžete připojit.

   Ujistěte se, že se v poli Připojit k poli Zobrazí správný ladicí program pro cílový prohlížeč, JavaScript (Chrome) nebo JavaScript (Microsoft Edge – Chromium). Zadáním chromu nebo okraje do pole filtru vyfiltrujte výsledky.

5. V tomto příkladu vyberte proces prohlížeče se správným portem hostitele localhost. Číslo portu 1337 nebo localhost se může zobrazit také v poli Název , které vám pomůže vybrat správný proces.

6. Vyberte možnost Připojit.

   Následující příklad ukazuje okno Připojit k procesu pro prohlížeč Microsoft Edge.

   

   Tip

   Pokud ladicí program nepřipočítá a zobrazí se zpráva Nejde se připojit k procesu. Operace není v aktuálním stavu legální. Před spuštěním prohlížeče v režimu ladění ukončete všechny instance cílového prohlížeče pomocí Správce úloh. Rozšíření prohlížeče můžou být spuštěná a brání úplnému režimu ladění.

7. Kód se zarážkou se už spustil, a proto aktualizujte stránku prohlížeče, aby narazil na zarážku.

   V závislosti na vašem prostředí, stavu prohlížeče a krocích, které jste provedli dříve, můžete narazit na zarážku v souboru app-bundle.js nebo v mapovaném umístění v souboru app.tsx. V obou případech můžete procházet kód pomocí krokování a zkoumat proměnné.

   Zatímco je ladicí program pozastavený, můžete stav aplikace prozkoumat tak, že najedete myší na proměnné a použijete okna ladicího programu. Pokud chcete procházet kód, stiskněte klávesu F11 nebo vyberte Krok ladění>, nebo stiskněte klávesu F10 nebo vyberte Krok ladění.> Pokud chcete pokračovat ve spouštění kódu, stiskněte klávesu F5 nebo vyberte Pokračovat. Další informace o základních funkcích ladění najdete v tématu První seznámení s ladicím programem.

   • Pokud v souboru app.tsx nemůžete rozdělit kód, zkuste k připojení ladicího programu použít metodu Připojit k procesu, jak je popsáno v předchozích krocích. Ujistěte se, že je vaše prostředí správně nastavené:

     • Zavřete všechny instance prohlížeče, včetně rozšíření Chrome, pomocí Správce úloh. Ujistěte se, že prohlížeč spustíte v režimu ladění.

     • Ujistěte se, že zdrojový soubor mapy obsahuje odkaz na soubor ./app.tsx , a ne webpack:///./app.tsx, který brání ladicímu programu sady Visual Studio v vyhledání souboru app.tsx.

     Nebo zkuste použít příkaz debugger; v app.tsx nebo místo toho nastavte zarážky v Vývojářských nástrojích Chrome nebo F12 Tools for Microsoft Edge.

   • Pokud v souboru app-bundle.js nemůžete rozdělit kód, odeberte zdrojový soubor mapy app-bundle.js.map.

Další kroky