So erstellen und veröffentlichen Sie TypeScript-Pakete auf NPM

Da TypeScript immer beliebter wird, erstellen viele Entwickler statisch typisierte Pakete, um die Vorteile der Sprache zu nutzen. In diesem Beitrag behandeln wir den Prozess der Erstellung und Veröffentlichung eines NPM-Pakets mit TypeScript.

1. Konfigurieren der Umgebung

Stellen Sie sicher, dass Node.js, NPM und TypeScript installiert sind. Sie können TypeScript global installieren mit:

npm install -g typescript

Überprüfen Sie, ob alles korrekt installiert ist:

node -v
npm -v
tsc -v

2. Erstellen des Projekts

Erstellen Sie zunächst ein Verzeichnis für Ihr Projekt:

mkdir meu-pacote-typescript
cd meu-pacote-typescript

Node.js-Projekt initialisieren:

npm init

Dadurch wird die Datei package.json erstellt, in der Sie die grundlegenden Paketinformationen definieren können.

3. TypeScript konfigurieren

Jetzt initialisieren Sie ein TypeScript-Projekt:

tsc --init

Dadurch wird eine tsconfig.json-Datei erstellt. Bearbeiten Sie es nach Bedarf, aber eine übliche Konfiguration ist wie folgt:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

Hier konfigurieren wir den TypeScript-Compiler, um ES6-Code mit CommonJS-Modulen zu generieren und Typdeklarationen einzuschließen (Deklaration: true). Der kompilierte Code wird im Verzeichnis dist.

4. Den Code schreiben

Erstellen Sie ein src-Verzeichnis und darin eine index.ts-Datei:

mkdir src
touch src/index.ts

Schreiben Sie in die Datei index.ts Ihren Paketcode. Erstellen wir eine einfache Funktion zum Konvertieren von Zeichenfolgen in Großbuchstaben:

export function toUpperCase(str: string): string {
  return str.toUpperCase();
}

5. Kompilieren des Codes

TypeScript zu JavaScript kompilieren:

tsc

Dadurch werden die JavaScript-Dateien und Typdeklarationen im dist-Verzeichnis generiert.

6. Das Paket lokal testen

Um Ihr Paket zu testen, können Sie es lokal in einem anderen Projekt installieren:

1. Führen Sie in Ihrem Testprojektverzeichnis Folgendes aus:

   npm install ../caminho-para-o-diretorio-do-seu-pacote/dist

1. Verwenden Sie die Funktion im Testprojekt:

   import { toUpperCase } from 'nome-do-seu-pacote';

   console.log(toUpperCase('hello world')); // "HELLO WORLD"

Dadurch wird sichergestellt, dass sowohl JavaScript-Code als auch Typdeklarationen korrekt funktionieren.

7. Veröffentlichung auf NPM

Wenn alles korrekt funktioniert, können Sie Ihr Paket veröffentlichen.

1. NPM-Anmeldung

Wenn Sie noch kein NPM-Konto haben, erstellen Sie eines und melden Sie sich an:

   npm login

1. Veröffentlichung

Fügen Sie vor der Veröffentlichung ein Build-Skript zu package.json hinzu:

   "scripts": {
     "build": "tsc"
   }

Und fügen Sie den Ausgabepfad in package.json hinzu:

   "main": "dist/index.js",
   "types": "dist/index.d.ts"

Jetzt kompilieren und veröffentlichen:

   npm run build
   npm publish

Wenn der Paketname bereits vorhanden ist, müssen Sie einen neuen Namen wählen.

8. Aktualisierung des Pakets

Um eine neue Version zu veröffentlichen, ändern Sie die Version in package.json, führen Sie npm run build erneut aus und veröffentlichen Sie:

npm publish

9. Gute Praktiken

• Dokumentation: Fügen Sie eine README.md-Datei hinzu, die erklärt, wie Sie Ihr Paket verwenden.
• Tests: Schreiben Sie Tests mit Frameworks wie Jest, um sicherzustellen, dass der Code wie erwartet funktioniert.
• Linting: Verwenden Sie Tools wie ESLint und Prettier, um die Codequalität aufrechtzuerhalten.
• Versionierung: Folgen Sie SemVer, um Ihr Paket zu versionieren.

Abschluss

Das Erstellen und Veröffentlichen von TypeScript-Paketen auf NPM verbessert nicht nur die Codequalität, sondern bietet auch Tippvorteile für diejenigen, die Ihr Paket nutzen. Wenn Sie diesem Leitfaden folgen, sind Sie bereit, Ihre Lösungen mit der JavaScript- und TypeScript-Community zu teilen und so zu einem stärkeren, robusteren Entwicklungsökosystem beizutragen.

Da Sie nun den Prozess kennen, wie wäre es, wenn Sie mit der Erstellung Ihres nächsten TypeScript-Pakets beginnen?

Das obige ist der detaillierte Inhalt vonSo erstellen und veröffentlichen Sie TypeScript-Pakete auf NPM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!