Szybki start: tworzenie pierwszej aplikacji Node.js pomocą Visual Studio

W tym 5-10-minutowym wprowadzeniu do zintegrowanego Visual Studio projektowego (IDE) utworzysz prostą aplikację Node.js internetową.

Wymagania wstępne

Przed rozpoczęciem zainstaluj program Visual Studio i skonfiguruj Node.js środowisko.

Instalowanie Visual Studio i Node.js obciążenia

Jeśli jeszcze nie zainstalowano Visual Studio:

  1. Przejdź do strony pobierania Visual Studio, aby zainstalować Visual Studio 2022 bezpłatnie.

  2. W Instalator programu Visual Studio wybierz pakietNode.js dewelopera, a następnie wybierz pozycję Zainstaluj.

    Zrzut ekranu przedstawiający obciążenie node j wybrane w Instalator programu Visual Studio.

Jeśli masz już Visual Studio zainstalowany.

  1. W Visual Studio narzędzia Pobierz narzędzia > i funkcje.

  2. W Instalator programu Visual Studio wybierz pakietNode.js dewelopera, a następnie wybierz pozycję Modyfikuj, aby pobrać i zainstalować obciążenie.

Konfigurowanie środowiska Node.js użytkownika

Zainstaluj wersję LTS środowiska uruchomieniowego Node.js . Wersja LTS ma najlepszą zgodność z innymi platformami i bibliotekami.

Mimo Node.js architektury 32-bitowej i 64-bitowej, instalator Node.js obsługuje tylko jedną wersję jednocześnie.

Visual Studio zwykle wykrywa zainstalowane środowisko uruchomieniowe, ale jeśli nie, możesz skonfigurować projekt tak, aby odwołył się do zainstalowanego środowiska uruchomieniowego:

  1. Po utworzeniu projektukliknij prawym przyciskiem myszy węzeł projektu.

  2. Wybierz pozycję Właściwości i ustawNode.exe ścieżkę. Można użyć globalnej instalacji Node.js lub określić ścieżkę do interpretera lokalnego dla dowolnego Node.js projektu.

Instalowanie programu Visual Studio

Jeśli jeszcze nie zainstalowano programu Visual Studio 2019, przejdź do strony pobierania Visual Studio, aby zainstalować ją bezpłatnie.

Instalowanie programu Visual Studio

Jeśli jeszcze nie zainstalowano programu Visual Studio 2017, przejdź do strony pobierania Visual Studio, aby zainstalować ją bezpłatnie.

Konfigurowanie środowiska Node.js użytkownika

Visual Studio może pomóc w skonfigurowaniu środowiska, w tym zainstalowanie narzędzi wspólnych dla Node.js tworzenia aplikacji.

  1. W Visual Studio narzędzia Pobierz narzędzia > i funkcje.

  2. W Instalator programu Visual Studio wybierz pakietNode.js i wybierz pozycję Modyfikuj, aby pobrać i zainstalować obciążenie.

    Zrzut ekranu przedstawiający obciążenie Node J S wybrane w Instalator programu Visual Studio.

  3. Zainstaluj wersję LTS środowiska uruchomieniowegoNode.js . Zalecamy wersję LTS, aby uzyskać najlepszą zgodność z zewnętrznymi platformami i bibliotekami.

    Mimo Node.js architektury 32-bitowej i 64-bitowej, instalator Node.js obsługuje tylko jedną zainstalowaną wersję na raz.

  4. Jeśli Visual Studio nie wykryje zainstalowanego środowiska uruchomieniowego (zwykle tak jest), skonfiguruj projekt tak, aby odwołył się do zainstalowanego środowiska uruchomieniowego:

    1. Po utworzeniu projektu kliknijprawym przyciskiem myszy węzeł projektu.

    2. Wybierz pozycję Właściwości i ustaw Node.exe ścieżkę. Możesz użyć globalnej instalacji usługi Node.js lub określić ścieżkę do interpretera lokalnego w każdym z Node.js projektów.

Tworzenie projektu aplikacji

W Visual Studio utwórz nowy projekt Node.js projektu.

  1. Uruchom Visual Studio, a następnie naciśnij klawisz Esc, aby zamknąć okno uruchamiania.

  2. Naciśnij klawisze Ctrl Q , a następnie + node.js w polu wyszukiwania.

  3. Wybierz pozycję Puste Node.js Web Application.

  4. W oknie dialogowym wybierz pozycję Utwórz.

  1. Naciśnij klawisz Esc, aby zamknąć okno uruchamiania.

  2. Naciśnij klawisze Ctrl + Q, aby otworzyć pole wyszukiwania, a następnie wpiszNode.js.

  3. Wybierz pozycję Puste Node.js Web Application (JavaScript). W oknie dialogowym wybierz pozycję Utwórz.

  1. Na górnym pasku menu wybierz pozycję Nowy plik > > Project.

  2. W lewym okienku okna dialogowego Nowa Project rozwiń pozycję JavaScript i wybierz pozycjęNode.js.

  3. W środkowym okienku wybierz pozycję Puste Node.js internetowej i wybierz przycisk OK.

Visual Studio tworzy i otwiera projekt. Plikserver.js projektu zostanie otwarty w edytorze.

Jeśli nie widzisz szablonu projektu Blank Node.js Web Application, musisz dodaćNode.js tworzenia aplikacji. Aby uzyskać instrukcje, zobacz Wymagania wstępne.

Eksplorowanie środowiska IDE

Visual Studio może pomóc w skonfigurowaniu środowiska, w tym zainstalowanie narzędzi wspólnych dla Node.js tworzenia aplikacji.

  1. W okienku po prawej stronie przyjrzyj się Eksplorator rozwiązań.

    • Na najwyższym poziomie znajduje się rozwiązanie, które domyślnie ma taką samą nazwę jak projekt. Rozwiązanie reprezentowane przez plik sln na dysku jest kontenerem dla co najmniej jednego powiązanego projektu.
    • Projekt o nazwie użytej podczas jego skonfigurowania jest wyróżniony pogrubioną czcionką. Na dysku projekt jest reprezentowany przez plik .njsproj w folderze projektu.
    • Węzeł npm pokazuje zainstalowane pakiety npm. Możesz kliknąć prawym przyciskiem myszy węzeł npm, aby wyszukać i zainstalować pakiety npm przy użyciu okna dialogowego.

    Zrzut ekranu przedstawiający Eksplorator rozwiązań okienku.

  2. Aby zainstalować pakiety npm lub Node.js polecenia z wiersza polecenia, kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Otwórz wiersz polecenia tutaj.

    Zrzut ekranu przedstawiający pozycję Otwórz wiersz polecenia w menu kontekstowym projektu.

  3. Aby przetestować nawigację do kodu źródłowego, w otwartym pliku server.js naciśnij klawisz F12 lub kliknij prawym przyciskiem myszy i wybierz polecenie Przejdź do definicji z createServer menu createServer kontekstowego. To polecenie przenosi do definicji funkcji createServer w http.d.ts.

    Zrzut ekranu przedstawiający polecenie Przejdź do definicji w menu kontekstowym createServer.

  4. Wróć do server.js, znajdź ten wiersz kodu: res.end('Hello World\n'); i zmodyfikuj go, aby:

    res.end('Hello World\n' + res.connection.

    Podczas connection. wpisywania funkcji IntelliSense udostępnia opcje autouzupełniania wpisu kodu.

    Zrzut ekranu przedstawiający opcje automatycznego ukończenia funkcji IntelliSense.

  5. Wybierz localPort pozycję i wpisz , aby ); ukończyć instrukcje:

    res.end('Hello World\n' + res.connection.localPort);

  1. W okienku po prawej stronie przyjrzyj się Eksplorator rozwiązań.

    • Na najwyższym poziomie znajduje się rozwiązanie, które domyślnie ma taką samą nazwę jak projekt. Rozwiązanie reprezentowane przez plik sln na dysku jest kontenerem dla co najmniej jednego powiązanego projektu.
    • Projekt o nazwie użytej podczas jego skonfigurowania jest wyróżniony pogrubioną czcionką. Na dysku projekt jest reprezentowany przez plik .njsproj w folderze projektu.
    • Węzeł npm pokazuje zainstalowane pakiety npm. Możesz kliknąć prawym przyciskiem myszy węzeł npm, aby wyszukać i zainstalować pakiety npm przy użyciu okna dialogowego.

    Zrzut ekranu przedstawiający Eksplorator rozwiązań okienku.

  2. Aby zainstalować pakiety npm lub polecenia Node.js wiersza polecenia, kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Otwórz wiersz polecenia tutaj z menu kontekstowego.

    Zrzut ekranu przedstawiający pozycję Otwórz wiersz polecenia w menu kontekstowym projektu.

  3. Aby przetestować nawigację do kodu źródłowego, w otwartym plikuserver.js wybierz pozycję http.createServer i naciśnij klawisz F12 lub wybierz polecenie Przejdź do definicji z menu kontekstowego dostępnego po kliknięciu prawym przyciskiem myszy. To polecenie przenosi do definicji funkcji createServer w http.d.ts.

    Zrzut ekranu przedstawiający polecenie Przejdź do definicji w menu kontekstowym createServer.

  4. Wróć do server.js, znajdź ten wiersz kodu: res.end('Hello World\n'); i zmodyfikuj go, aby:

    res.end('Hello World\n' + res.connection.

    Podczas wpisywania połączenia funkcja IntelliSense udostępnia opcje autouzupełniania wpisu kodu.

    Zrzut ekranu przedstawiający opcje automatycznego ukończenia funkcji IntelliSense.

  5. Wybierz polecenie localPort i wpisz , ); aby ukończyć instrukcje:

    res.end('Hello World\n' + res.connection.localPort);

Uruchamianie aplikacji

  1. Naciśnij klawisz Ctrl + F5 lub wybierz pozycję Rozpocznij > debugowanie bez debugowania, aby uruchomić aplikację.

    Aplikacja zostanie otwarta w przeglądarce.

  2. W przeglądarce sprawdź, czy jest wyświetlany komunikat Hello world i numer portu lokalnego.

Gratulacje! Utworzono prostą aplikację Node.js za pomocą Visual Studio. Aby bardziej zagłębić się w ten temat, przejdź do sekcji Samouczki spisu treści.

Następne kroki