Transpilowanie kodu TypeScript przy użyciu narzędzia npm

Dodawanie obsługi języka TypeScript przy użyciu narzędzia npm

Dodaj obsługę języka TypeScript przy użyciu pakietu npm języka TypeScript. Podczas instalowania pakietu npm w projekcie edytor ładuje odpowiednią wersję usługi językowej TypeScript.

1. Sprawdź, czy musisz zainstalować jakiekolwiek obciążenie programistyczne dla Visual Studio lub środowiska uruchomieniowego Node.js.

   W przypadku projektów utworzonych przy użyciu systemu projektów JavaScript (JSPS) lub .esprojnie są potrzebne żadne dodatkowe obciążenia. Wystarczy zainstalować narzędzie npm (https://www.npmjs.com/), które jest dołączone do Node.js.

2. Jeśli projekt jeszcze go nie zawiera, zainstaluj pakiet npm TypeScript .

   W okienku Eksplorator rozwiązań (po prawej stronie) otwórz package.json w katalogu głównym projektu. Pakiety wymienione odpowiadają pakietom w węźle npm w Eksplorator rozwiązań. Aby uzyskać więcej informacji, zobacz Manage npm packages.

   Sprawdź opcję npm w oknie danych wyjściowych, aby wyświetlić postęp instalacji pakietu. Zainstalowany pakiet jest wyświetlany w węźle npm w Eksplorator rozwiązań.

3. Jeśli projekt jeszcze go nie zawiera, dodaj plik tsconfig.json do katalogu głównego projektu. Aby dodać plik, kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję Dodaj > nowy element. Wybierz plik konfiguracyjny JSON TypeScript , a następnie naciśnij Dodaj.

   Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.

   Visual Studio dodaje plik tsconfig.json do katalogu głównego projektu. Za pomocą tego pliku można skonfigurować opcje dla języka tsc, kompilatora Języka TypeScript, który transpiluje język TypeScript do języka JavaScript.

4. Otwórz tsconfig.json i zaktualizuj, aby ustawić żądane opcje kompilatora.

   Poniżej przedstawiono przykład prostego pliku tsconfig.json.

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   W tym przykładzie:

   • include informuje kompilator, gdzie należy znaleźć pliki TypeScript (*.ts).
   • Opcja outDir określa folder wyjściowy dla zwykłych plików JavaScript, które są transpilowane przez tsc, kompilator TypeScript.
   • sourceMap opcja wskazuje, czy kompilator generuje pliki sourceMap.

   Poprzednia konfiguracja zawiera tylko podstawowe wprowadzenie do konfigurowania języka TypeScript. Aby uzyskać informacje na temat innych opcji, zobacz tsconfig.json.

Kompilowanie aplikacji

1. Dodaj pliki TypeScript (.ts) lub TypeScript JSX (.tsx) do projektu, a następnie dodaj kod TypeScript. Prosty przykład języka TypeScript jest następujący:

   let message: string = 'Hello World';
   console.log(message);
   

2. W package.json dodaj obsługę poleceń kompilacji i czyszczenia Visual Studio za pomocą następujących skryptów.

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Aby utworzyć przy użyciu narzędzia innej firmy, takiego jak webpack, możesz dodać skrypt kompilacji wiersza polecenia do pliku package.json:

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

3. Jeśli musisz skonfigurować opcje kompilacji i wdrażania, takie jak adres URL aplikacji lub polecenia środowiska uruchomieniowego, kliknij prawym przyciskiem myszy węzeł projektu w Eksplorator rozwiązań, a następnie wybierz pozycję Właściwości.

   Uwaga / Notatka

   Podczas konfigurowania narzędzi innych firm, projekty korzystające z systemu Projektów JavaScript (JSPS) lub esproj nie używaj ścieżek skonfigurowanych w obszarze Narzędzia>Opcje>Projekty i rozwiązania>Zarządzanie pakietami internetowymi>Zewnętrzne narzędzia web. Te ustawienia są używane dla innych typów projektów.

4. Wybierz pozycję Build > Build Solution.

   Aplikacja kompiluje się automatycznie po jej uruchomieniu. Jednak podczas procesu kompilacji mogą wystąpić następujące elementy:

   Jeśli wygenerowano mapy źródłowe, otwórz folder określony w outDir opcji i znajdź wygenerowane pliki *.js wraz z wygenerowanymi plikami *js.map.

   Pliki mapy źródłowej są wymagane do debugowania .

Uruchamianie aplikacji

Automatyzowanie zadań kompilacji

Task Runner Explorer w Visual Studio można użyć do automatyzacji zadań dla narzędzi firm trzecich, takich jak npm i webpack.

Treści powiązane

Właściwości, React, Angular, Vue