Samouczek: tworzenie aplikacji Node.js i Express w programie Visual Studio

  • Artykuł

W tym artykule dowiesz się, jak za pomocą programu Visual Studio utworzyć prostą aplikację internetową Node.js korzystającą z platformy Express.

Przed rozpoczęciem zapoznaj się z szybkimi często zadawanymi pytaniami, aby przedstawić kilka kluczowych pojęć:

  • Co to jest Node.js?

    Node.js to środowisko uruchomieniowe JavaScript po stronie serwera, które wykonuje kod JavaScript.

  • Co to jest npm?

    Menedżer pakietów ułatwia korzystanie z bibliotek kodu źródłowego Node.js i udostępnianie ich. Domyślnym menedżerem pakietów dla środowiska Node.js jest npm. Menedżer pakietów npm upraszcza instalację, aktualizowanie i odinstalowywanie bibliotek.

  • Co to jest express?

    Express to platforma aplikacji internetowej serwera używana przez środowisko Node.js do tworzenia aplikacji internetowych. W przypadku platformy Express istnieje wiele różnych sposobów tworzenia interfejsu użytkownika. Implementacja udostępniona w tym samouczku używa domyślnego aparatu szablonu generatora aplikacji Express o nazwie Pug do renderowania frontonu.

Wymagania wstępne

Upewnij się, że zainstalowano następujące elementy:

  • Program Visual Studio 2022 w wersji 17.4 lub nowszej z zainstalowanym pakietem roboczym ASP.NET i tworzenie aplikacji internetowych. Przejdź do strony pobierania programu Visual Studio, aby zainstalować ją bezpłatnie. Jeśli musisz zainstalować obciążenie i masz już program Visual Studio, przejdź do pozycji Narzędzia Pobierz narzędzia>i funkcje..., co spowoduje otwarcie Instalator programu Visual Studio. Wybierz obciążenie ASP.NET i tworzenie aplikacji internetowych, a następnie wybierz pozycję Modyfikuj.
  • npm (https://www.npmjs.com/), który jest dołączony do biblioteki Node.js
  • npx (https://www.npmjs.com/package/npx)

Tworzenie aplikacji

  1. W oknie Start (wybierz pozycję Okno uruchamiania pliku>, aby otworzyć), wybierz pozycję Utwórz nowy projekt.

    Create a new project

  2. Wyszukaj ciąg Express na pasku wyszukiwania u góry, a następnie wybierz pozycję JavaScript Express Application.

    Choose a template

  3. Nadaj projektowi i rozwiązaniu nazwę.

Wyświetlanie właściwości projektu

Domyślne ustawienia projektu umożliwiają kompilowanie i debugowanie projektu. Jeśli jednak musisz zmienić ustawienia, kliknij prawym przyciskiem myszy projekt w Eksplorator rozwiązań, wybierz pozycję Właściwości, a następnie przejdź do sekcji Kompilacja lub Debugowanie.

Uwaga

plik launch.json przechowuje ustawienia uruchamiania skojarzone z przyciskiem Uruchom na pasku narzędzi Debugowanie. Obecnie plik launch.json musi znajdować się w folderze .vscode .

Kompilowanie projektu

Wybierz pozycję Kompiluj>rozwiązanie kompilacji, aby skompilować projekt.

Uruchamianie aplikacji

Naciśnij klawisz F5 lub wybierz przycisk Start w górnej części okna i zostanie wyświetlony wiersz polecenia:

  • npm z uruchomionym poleceniem node ./bin/www

Uwaga

Sprawdź dane wyjściowe konsoli pod kątem komunikatów, takich jak komunikat informujący o zaktualizowaniu wersji środowiska Node.js.

Następnie powinna zostać wyświetlona podstawowa aplikacja Express.

Debugowanie aplikacji

Teraz przejdziemy kilka sposobów debugowania aplikacji.

Najpierw, jeśli aplikacja jest nadal uruchomiona, naciśnij klawisze Shift + F5 lub wybierz czerwony przycisk zatrzymania w górnej części okna, aby zatrzymać bieżącą sesję. Możesz zauważyć, że zatrzymanie sesji zamyka przeglądarkę z wyświetloną aplikacją, ale pozostawia okno wiersza polecenia uruchamiające proces Node. Na razie zamknij wszystkie utrzymujące się wiersze polecenia. W dalszej części tego artykułu opisano, dlaczego warto opuścić proces Node uruchomiony.

Debugowanie procesu node

Na liście rozwijanej obok przycisku Uruchom powinny zostać wyświetlone następujące opcje uruchamiania:

  • localhost (Edge)
  • localhost (Chrome)
  • Debugowanie dev env
  • Uruchamianie węzła i przeglądarki

Przejdź dalej i wybierz opcję Uruchom węzeł i przeglądarkę . Teraz przed naciśnięciem klawisza F5 lub ponownym naciśnięciem przycisku Uruchom ustaw punkt przerwania w pliku index.js (w folderze routes ), wybierając lewą rynnę przed następującym wierszem kodu: res.render('index', { title: 'Express' });

Napiwek

Możesz również umieścić kursor w wierszu kodu i nacisnąć klawisz F9 , aby przełączyć punkt przerwania dla tego wiersza.

Następnie naciśnij klawisz F5 lub wybierz pozycję Debuguj>rozpocznij debugowanie, aby debugować aplikację.

W ustawionym punkcie przerwania powinien zostać wyświetlony debuger. Podczas jej wstrzymania możesz sprawdzić stan aplikacji. Umieszczenie wskaźnika myszy na zmiennych umożliwi sprawdzenie ich właściwości.

Po zakończeniu inspekcji stanu naciśnij klawisz F5 , aby kontynuować, a aplikacja powinna załadować się zgodnie z oczekiwaniami.

Tym razem po zatrzymaniu zauważysz, że zarówno przeglądarka, jak i okna wiersza polecenia zostaną zamknięte. Aby dowiedzieć się, dlaczego, przyjrzyj się bliżej plikowi launch.json.

Opis pliku launch.json

Plik launch.json znajduje się obecnie w folderze .vscode . Jeśli nie widzisz folderu .vscode w Eksplorator rozwiązań, wybierz pozycję Pokaż wszystkie pliki.

Jeśli wcześniej pracowałeś z programem Visual Studio Code, plik launch.json będzie wyglądać znajomo. Plik launch.json działa w taki sam sposób, jak w programie Visual Studio Code, aby oznaczyć konfiguracje uruchamiania używane do debugowania. Każdy wpis określa co najmniej jeden element docelowy do debugowania.

Pierwsze dwa wpisy to wpisy przeglądarki i powinny wyglądać mniej więcej tak:

    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }

W powyższych wpisach widać, że type właściwość jest ustawiona na typ przeglądarki. Jeśli zostanie uruchomiony tylko typ przeglądarki jako jedyny element docelowy debugowania, program Visual Studio debuguje tylko proces przeglądarki frontonu, a proces Node zostanie uruchomiony bez dołączonego debugera, co oznacza, że wszystkie punkty przerwania ustawione w procesie Node nie będą powiązane.

Po zatrzymaniu sesji proces Node będzie również kontynuowany. Działanie jest celowo pozostawione, gdy przeglądarka jest obiektem docelowym debugowania, ponieważ jeśli praca jest wykonywana wyłącznie na frontonie, proces zaplecza stale działa, ułatwia tworzenie przepływu pracy.

Na początku tej sekcji zamknięto utrzymujące się okno wiersza polecenia, aby ustawić punkty przerwania w procesie Node. Aby proces Node był debugowany, należy go ponownie uruchomić za pomocą dołączonego debugera. Jeśli proces węzła bez debugowania zostanie uruchomiony, próba uruchomienia procesu Node w trybie debugowania (bez ponownego skonfigurowania portu) zakończy się niepowodzeniem.

Uwaga

edge Obecnie i chrome są jedynymi obsługiwanymi typami przeglądarki do debugowania.

Trzeci wpis w pliku launch.json określa node jako typ debugowania i powinien wyglądać następująco:

    {
      "name": "Debug Dev Env",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

Ten wpis spowoduje uruchomienie tylko procesu Node w trybie debugowania. Nie zostanie uruchomiona żadna przeglądarka.

Czwarty wpis podany w pliku "launch.json* jest następującą złożoną konfiguracją uruchamiania.

    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Debug Dev Env",
        "localhost (Edge)"
      ]
    }

Ta konfiguracja złożona jest taka sama jak konfiguracja złożonego uruchamiania vscode i wybranie jej umożliwia debugowanie zarówno frontonu, jak i zaplecza. Widać, że po prostu odwołuje się do poszczególnych konfiguracji uruchamiania dla procesów node i przeglądarki.

Istnieje wiele innych atrybutów, których można użyć w konfiguracji uruchamiania. Na przykład można ukryć konfigurację z listy rozwijanej, ale nadal można jej odwoływać, ustawiając hidden atrybut w presentation obiekcie na truewartość .

    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }

Kliknij pozycję Opcje , aby uzyskać listę atrybutów, których można użyć, aby ulepszyć środowisko debugowania. Pamiętaj, że obecnie obsługiwane są tylko konfiguracje uruchamiania . Każda próba użycia konfiguracji dołączania spowoduje niepowodzenie wdrożenia.