MERN TypeScript-Einrichtungshandbuch

Hallo, willkommen zu meinem Leitfaden zum Einrichten eines MERN-Stack-Projekts mit TypeScript. Dieser Leitfaden soll sowohl Anfängern als auch erfahrenen Entwicklern dabei helfen, eine voll funktionsfähige Entwicklungsumgebung für die MERN-Stack-Entwicklung einzurichten.

Jetzt beginnen wir mit der Einrichtung.

Anforderungen

• Node.js (Version 14 oder höher empfohlen)
• MongoDB-Datenbank oder MongoDB Community Server
• Installieren Sie TypeScript mit dem folgenden Befehl:

npm install -g typescript

Wurzel

1. Erstellen Sie mit dem folgenden Befehl ein Verzeichnis für Ihr Projekt:

<span>mkdir my-app</span>

2. Navigieren Sie zum Verzeichnis:

<span>cd my-app</span>

3. Führen Sie den folgenden Befehl aus, um den Knoten in unserem Verzeichnis zu initialisieren.

Erklärung: Dieser Befehl initialisiert ein neues Node.js-Projekt und erstellt eine package.json-Datei mit Standardwerten.

npm init -y

Kunde

Für den Client können Sie entweder Vite oder Create React App verwenden. Hier sind die Anweisungen für beide:

Vite verwenden

1. Geben Sie in Ihrem Stammverzeichnis den folgenden Befehl ein:

Erklärung: Dieser Befehl erstellt eine neue Vite-Anwendung in einem Verzeichnis mit dem Namen client.

npx create-vite@latest client

2. Sie sehen verschiedene Optionen. Wählen Sie Reagieren.
3. Wählen Sie die Option: TypeScript SWC.
4. Sobald der Vorgang abgeschlossen ist, navigieren Sie mit dem folgenden Befehl zum Client-Verzeichnis.

<span>cd client</span>

Die folgenden Befehle müssen im Client-Verzeichnis ausgeführt werden.

5. Sobald Sie sich im Client-Verzeichnis befinden, führen Sie den folgenden Befehl aus, um alle Abhängigkeiten zu installieren.

Erklärung: Dieser Befehl installiert die in der Datei package.json aufgeführten Abhängigkeiten.

npm install

6. Navigieren Sie nach der Installation mit dem folgenden Befehl zum Stammverzeichnis des Projekts:

<span>cd ..</span>

Verwenden von Create React App

1. Geben Sie in Ihrem Stammverzeichnis den folgenden Befehl ein:

Erklärung: Dieser Befehl erstellt eine neue Create React App-Anwendung in einem Verzeichnis mit dem Namen client.

npx create-react-app client --template typescript

Server

1. In Ihrem Stammverzeichnis erstellen wir das Verzeichnis Server.

Erklärung: Dieser Befehl erstellt ein neues Verzeichnis mit dem Namen server.

<span>mkdir server</span>

2. Navigieren Sie mit dem folgenden Befehl zum Verzeichnis Server:

<span>cd server</span>

Die folgenden Befehle müssen in dem von uns erstellten Serververzeichnis ausgeführt werden.

3. Führen Sie diesen Befehl aus, um automatisch die Datei package.json zu erstellen.

npm <span>init -y</span>

4. Führen Sie nun die folgenden Befehle aus, um unsere Abhängigkeiten zu installieren.

Erklärung: Diese Befehle installieren die notwendigen Abhängigkeiten für unseren Server. cors wird zum Aktivieren von CORS, dotenv zum Laden von Umgebungsvariablen, express zum Erstellen des Servers und mongoose zum Herstellen einer Verbindung zu MongoDB verwendet. Zu den Entwicklungsabhängigkeiten gehören TypeScript und die Typdefinitionen für unsere Pakete sowie nodemon und ts-node zum Ausführen unseres Servers während der Entwicklung.

npm install -g typescript

5. Erstellen Sie eine .gitignore-Datei und fügen Sie die folgenden Zeilen hinzu:

Erklärung: Die Datei .gitignore gibt absichtlich nicht verfolgte Dateien an, die Git ignorieren soll.

<span>mkdir my-app</span>

6. Nun richten wir TypeScript ein und erstellen eine Datei mit dem Namen tsconfig.json

Erklärung: Die Datei tsconfig.json ist eine Konfigurationsdatei für TypeScript. Es gibt die Root-Dateien und die Compiler-Optionen zum Kompilieren des Projekts an.

7. Kopieren und Einfügendie folgenden Konfigurationen:

<span>cd my-app</span>

8. Erstellen Sie mit dem folgenden Befehl ein Verzeichnis mit dem Namen src in Ihrem Serververzeichnis:

npm init -y

Die folgenden Befehle müssen im von uns erstellten Verzeichnis src ausgeführt werden.

9. Erstellen Sie eine Datei mit dem Namen server.ts

Erklärung: Diese server.ts-Datei richtet einen Express-Server ein, der eine Verbindung zu einer MongoDB-Datenbank herstellt und beginnt, einen bestimmten Port abzuhören.

10. Hier ist eine grundlegende Implementierung, wie die Datei server.ts aussehen sollte:

npx create-vite@latest client

11. Kehren wir mit dem folgenden Befehl zum Verzeichnis Server zurück:

<span>cd client</span>

Erklärung: Dieser Befehl ändert das aktuelle Verzeichnis in das übergeordnete Verzeichnis.

Der folgende Inhalt gilt für das Serververzeichnis.

12. Gehen wir nun zu unserer Datei package.json im Serververzeichnis.

13. Fügen wir einen Befehl hinzu, damit wir nodemon mit ts-node für unsere Entwicklung ausführen können.

14. Kopieren Sie diese Zeile und fügen Sie sie in den Skriptteil Ihrer package.json ein:

npm install

15. Sobald dies erledigt ist, gehen wir mit dem folgenden Befehl zum Stammverzeichnis:

<span>cd ..</span>

Durchführung unseres Projekts

Der folgende Inhalt gilt für das Stammverzeichnis des Projekts

1. Führen Sie den folgenden Befehl aus, um die Entwicklungsabhängigkeit gleichzeitig zu installieren.

Erklärung: concurrently ist ein Paket, mit dem Sie mehrere npm-Skripte gleichzeitig (gleichzeitig) ausführen können.

npx create-react-app client --template typescript

2. Navigieren Sie zur Datei package.json im Stammverzeichnis. Diese Datei enthält Metadaten zu Ihrem Projekt und seinen Abhängigkeiten.

3. Abhängig von dem Tool, das Sie zum Erstellen Ihres Clients verwendet haben (entweder Vite oder Create React App), kopieren Sie den entsprechenden Codeblock und fügen Sie ihn in den Abschnitt „scripts“ Ihrer package.json-Datei ein.

Vite

npm install -g typescript

React-App erstellen

<span>mkdir my-app</span>

4. Lassen Sie uns nun unser Projekt mit dem folgenden Befehl ausführen:

<span>cd my-app</span>

5. Jetzt sollten unser Client und unser Server gleichzeitig laufen. In Ihrem Terminal sollte die folgende Ausgabe angezeigt werden:

npm init -y

Das obige ist der detaillierte Inhalt vonMERN TypeScript-Einrichtungshandbuch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!