TypeScript SDK-Entwicklung: Ein 5-Jähriger könnte dies Schritt für Schritt nachvollziehen ~ Teil 1: Unser erstes MVP

Hallooooooooo!

Hoffe, es geht dir gut! Hier ist SMY! 👋 Lass uns gleich loslegen 🚀

Inhalt:

• ⚡ Some Background of SDK Development
• ⚡ Developing and running our first version

1️⃣ Was -

SDK (manchmal auch als Bibliothek bezeichnet) dient als Plug-In in Anwendungen, um zusätzliche Funktionen aus der Technologie abzuleiten.

2️⃣ Warum -

Die SDK-Entwicklung mit TypeScript bietet langfristige Zuverlässigkeit aufgrund der Typsicherheit und langfristigen Wartung.

3️⃣ Wie -

Zum Erstellen des SDK sind folgende grundlegende Schritte erforderlich:

1. Initialisieren des Projekts mit den richtigen Workflow-Einstellungen.
2. Bundler auswählen und seinen Zweck verstehen.
3. Verstehen von ESM, CJS, IIFE UMD, um SDK in verschiedenen Umgebungen auszuführen.
4. Veröffentlichen als Bibliothek auf NPM, semantische Versionierung und Lizenz.
5. NPM für SPAs und CDN für Browser.

In Teil 1 erstellen wir unser erstes grundlegendes SDK, um ein grundlegendes Verständnis zu erlangen.

Schritt 1: Projekt initialisieren

Führen Sie den folgenden Befehl aus, um das Projekt in einem neuen Ordner festzulegen:

 npm init -y

"-y" bedeutet standardmäßig „Ja“ für alle Folgeaufforderungen. Sie können es später in Package.json ändern, z. B. Autor, Lizenz, Version usw.

Gehen Sie zu package.json und fügen Sie type: module um mit dem neuesten EcmaScript-Modulsystem (ESM) zu arbeiten.

Ihre package.json sollte wie folgt aussehen:

 { "name": "ts-lib", "version": "1.0.0", "description": "SDK development tutorial", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "type": "module", "keywords": [], "author": "", "license": "ISC" }

Schritt 2: Grundlegende Entwicklungsbibliotheken installieren

1. Typoskript
2. @types/node – um TypeScript mit NodeJS zu arbeiten.
3. tsup – Der einfachste und schnellste Weg, Ihre TypeScript-Bibliotheken zu bündeln.

KOPIEREN

 npm i typescript @types/node tsup -D

Schritt 3: tsconfig für TypeScript-Einstellungen einrichten

Erstellen Sie eine tsconfig.json Datei im Stammverzeichnis des Projekts.

KOPIEREN

 touch tsconfig.json

Gehen Sie zur Datei und fügen Sie die folgende Konfiguration ein:

 { "compilerOptions": { /* Base Options: */ "esModuleInterop": true, "allowImportingTsExtensions": true, "emitDeclarationOnly": true, "skipLibCheck": true, "target": "es2022", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, "verbatimModuleSyntax": true, /* Strictness */ "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, /* If transpiling with TypeScript: */ "module": "NodeNext", "sourceMap": true, "outDir": "dist", /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"] }, "exclude": ["node_modules", "dist"] }

Sie können mit der Maus über jede Eigenschaft fahren, um mehr darüber zu erfahren.

Das Grundlegende, was man hier verstehen muss, ist:

 "module": "NodeNext", "sourceMap": true, "outDir": "dist",

1. „ NodeNext ist die richtige Wahl für die Erstellung von Bibliotheken, da es verhindert, dass Sie ESM mit Modulspezifizierern ausgeben, die nur in Bundlern funktionieren, aber in Node.js abstürzen. Wenn Sie konventionellen Code schreiben, gesunden Menschenverstand verwenden und sich auf qualitativ hochwertige Abhängigkeiten verlassen, ist die Ausgabe normalerweise hochkompatibel mit Bundlern und anderen Laufzeiten.“ Hier erfahren Sie mehr darüber: https://blog.andrewbran.ch/ist-nodenext-das-richtige-fur-bibliotheken-die-nicht-auf-node-js-abzielen/

   
   

2. sourceMap – Ermöglicht die Generierung von Quelldateien. Diese Dateien ermöglichen es Debuggern und anderen Tools, den ursprünglichen TypeScript-Quellcode anzuzeigen, wenn mit den ausgegebenen JavaScript-Dateien gearbeitet wird. Sie können es für die Produktion deaktivieren.

   
   

3. outDir – Geben Sie einen Ausgabeordner für alle ausgegebenen Dateien an.

 /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]

1. declaration – Generieren Sie .d.ts-Dateien aus TypeScript- und JavaScript-Dateien in Ihrem Projekt.

   
   

2. lib – Geben Sie einen Satz gebündelter Bibliotheksdeklarationsdateien an, die die Ziellaufzeitumgebung beschreiben. es2022 ist für Node-Anwendungen wie React und dom & dom.iterable zum Ausführen der Bibliothek im Browser.

Schritt 4: Schreiben Sie unseren ersten Code

Erstellen Sie eine Datei index.ts und schreiben Sie den folgenden Basiscode:

 const add = (a: number, b: number): number => a + b; const subtract = (a: number, b: number): number => a - b; export { add, subtract };

Erstellen Sie unseren ersten Code:

KOPIEREN

 tsup ./index.ts

Sie können jetzt sehen, dass wir einen dist -Ordner mit einer Ausgabedatei index.cjs haben

Lassen Sie uns unser erstes SDK integrieren und ausführen!

Erstellen Sie eine app.js Datei und fügen Sie den folgenden Code ein:

 import { add, subtract } from "./dist/index.cjs"; console.log(add(1, 2)); console.log(subtract(2, 1));

Da wir unser SDK nicht veröffentlicht haben, verknüpfen wir direkt mit dem lokalen Build.

Führen Sie jetzt unsere erste App aus

 node app.js

Sie sollten die folgende Ausgabe sehen:

 3 1

Glückwunsch 🎉🥳 🚀🚀🚀 Wir haben gerade unser erstes SDK erstellt und ausgeführt!

Einpacken:

Wir haben gerade die grundlegenden Schritte zum Erstellen und Ausführen unseres ersten SDK abgeschlossen. Gehen Sie zu Teil 2, wo wir eine grundlegende Ordnerstruktur erstellen und einen externen API-Endpunkt integrieren 🚀

.....

Jetzt verfügen Sie über das nötige Wissen, um Ihr eigenes SDK zu erstellen. Viel Spaß beim Programmieren! 🚀

Das war's, Leute! Ich hoffe, es war eine interessante Lektüre für euch. Danke! ✨

👉 Folge mir

GitHub

LinkedIn