Hallooooooooo!  Hoffe, es geht dir gut! Hier ist SMY! 👋 Lass uns gleich loslegen 🚀  Dies ist Teil 3 unserer   , in dem wir uns mit der Erstellung von Test-Apps für React, Browser, Node und Legacy Node befassen. SDK-Entwicklungsreihe  Inhalt:  ⚡  Setting up tsup for different execution environments  ⚡  Creating our apps  Schritt 1: Einrichten von   für verschiedene Umgebungen tsup  Erstellen Sie im Stammverzeichnis des Projekts die Datei   und fügen Sie den folgenden Inhalt ein: tsup.config.ts   import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });    – Bereinigen Sie das Ausgabeverzeichnis vor jedem Build. clean    – Typdefinitionen für TypeScript. dts    - Angabe des Einstiegspunkts. entry    –   für Legacy,   für neuere Node-Projekte und   für Browser. format cjs esm iife    – minimiert unseren Code und reduziert die Bundle-Größe. minify  Es ist keine zusätzliche Konfiguration erforderlich, da   automatisch nach dieser Datei sucht und alles für uns erledigt :) tsup  Beenden Sie jetzt den   Befehl und führen Sie ihn erneut aus. build   npm run build  Sie sehen die folgende Ausgabe in unserem   Ordner.  dist    - für CJS-Ausgabe index.cjs    – für ESM index.js    – für Browser index.global.js  Schritt 2: Erstellen einer Node-App  Erstellen Sie in   eine Datei   . Fügen Sie den folgenden Inhalt ein: example-apps/Node index.js   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   eine Datei   und fügen Sie den folgenden Inhalt ein: example-apps/Legacy-Node index.cjs   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   eine Datei   und fügen Sie den folgenden Inhalt ein: example-apps/Browser index.html   <!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   eine React-App, beispielsweise mit vite: example-apps   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   sollte in der Datei „package.json“ Ihr SDK-/Bibliotheksname stehen. ts-lib  Öffnen Sie nach dem Erstellen der React-App eine Komponentendatei wie   und integrieren Sie das SDK wie folgt: App.jsx   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:   Einpacken:  Wir haben gerade die Schritte zum Erstellen und Ausführen unseres SDK in verschiedenen Umgebungen abgeschlossen.  Gehen Sie zu Teil 4, um unser SDK zu veröffentlichen.  .....  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

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

View my Portfolio

Full Stack Engineer

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Make resilience your competitive advantage

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

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Programming Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Celebrating Our Programming Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Startups Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps