393 Lesungen

Diesem TypeScript SDK-Entwicklungshandbuch könnte sogar ein 5-Jähriger folgen – Teil 3: Erstellen von Test-Apps

von Syed Muhammad Yaseen4m2024/07/08

Zu lang; Lesen

Dies ist Teil 3 unserer SDK-Entwicklungsreihe, in dem wir uns mit der Erstellung von Test-Apps für React, Browser, Node und Legacy Node befassen.

featured image - Diesem TypeScript SDK-Entwicklungshandbuch könnte sogar ein 5-Jähriger folgen – Teil 3: Erstellen von Test-Apps

Hallooooooooo!

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

Dies ist Teil 3 unserer SDK-Entwicklungsreihe , in dem wir uns mit der Erstellung von Test-Apps für React, Browser, Node und Legacy Node befassen.

Inhalt:

⚡ Setting up tsup for different execution environments
⚡ Creating our apps

Schritt 1: Einrichten von `tsup` für verschiedene Umgebungen

Erstellen Sie im Stammverzeichnis des Projekts die Datei tsup.config.ts und fügen Sie den folgenden Inhalt ein:

 import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });

clean – Bereinigen Sie das Ausgabeverzeichnis vor jedem Build.

dts – Typdefinitionen für TypeScript.

entry - Angabe des Einstiegspunkts.

format – cjs für Legacy, esm für neuere Node-Projekte und iife für Browser.

minify – minimiert unseren Code und reduziert die Bundle-Größe.

Es ist keine zusätzliche Konfiguration erforderlich, da tsup automatisch nach dieser Datei sucht und alles für uns erledigt :)

Beenden Sie jetzt den build Befehl und führen Sie ihn erneut aus.

 npm run build

Sie sehen die folgende Ausgabe in unserem dist Ordner.

index.cjs - für CJS-Ausgabe

index.js – für ESM

index.global.js – für Browser

Schritt 2: Erstellen einer Node-App

Erstellen Sie in example-apps/Node eine Datei index.js . Fügen Sie den folgenden Inhalt ein:

 import sdk from "../../dist/index.js"; console.log(await sdk.fetchUsers());

Führen Sie nun die Datei mit einem Knoten in einem separaten Terminal aus und wechseln Sie zum Ordner:

 node index.js

Sie sehen die Ausgabe im Terminal.

Schritt 3: Erstellen einer Legacy-Node-App

Erstellen Sie in example-apps/Legacy-Node eine Datei index.cjs und fügen Sie den folgenden Inhalt ein:

 const sdk = require("../../dist/index.cjs"); sdk.default.fetchUsers().then((users) => console.log(users));

Führen Sie nun die Datei mit einem Knoten in einem separaten Terminal aus und wechseln Sie zum Ordner:

 node index.cjs

Sie sehen die Ausgabe im Terminal.

Schritt 4: Erstellen Sie eine Browser-App

Erstellen Sie in example-apps/Browser eine Datei index.html und fügen Sie den folgenden Inhalt ein:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../../dist/index.global.js"></script> </head> <body> This is a Test HTML <script> sdk.fetchUsers().then((users) => console.log(users)); </script> </body> </html>

Öffnen Sie die Datei im Browser. Sie sollten die folgende Antwort auf der Konsolenregisterkarte des zu untersuchenden Elements sehen:

Schritt 5: Erstellen Sie eine React-App

Erstellen Sie einen Link zu unserem SDK, um es als Bibliothek für Projekte ohne Veröffentlichung zu verwenden.

 npm link

Erstellen Sie in example-apps eine React-App, beispielsweise mit vite:

 npm create vite@latest

Nachdem Sie erfolgreich eine React-App erstellt haben, führen Sie den folgenden Befehl im React-Stammordner aus, um unser SDK zu verknüpfen.

 npm link ts-lib

Anstelle von ts-lib sollte in der Datei „package.json“ Ihr SDK-/Bibliotheksname stehen.

Öffnen Sie nach dem Erstellen der React-App eine Komponentendatei wie App.jsx und integrieren Sie das SDK wie folgt:

 import sdk from "ts-lib"; console.log(await sdk.fetchUsers());

Vollansicht:

 import { useState } from "react"; import reactLogo from "./assets/react.svg"; import viteLogo from "/vite.svg"; import "./App.css"; import sdk from "ts-lib"; console.log(await sdk.fetchUsers()); function App() { const [count, setCount] = useState(0); return ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.tsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> </> ); } export default App;

Führen Sie die React-App aus und gehen Sie zur Konsole. Sie sollte etwa so aussehen: