415 lectures

Un enfant de 5 ans pourrait suivre ce guide de développement du SDK TypeScript ~ Partie 3 : Création d'applications de test

par Syed Muhammad Yaseen4m2024/07/08

Trop long; Pour lire

Il s'agit de la troisième partie de notre série de développement de SDK dans laquelle nous allons plonger dans la création d'applications de test pour React, le navigateur, le nœud et le nœud hérité.

featured image - Un enfant de 5 ans pourrait suivre ce guide de développement du SDK TypeScript ~ Partie 3 : Création d'applications de test

Bonjouroooooo !

J'espère que vous allez bien ! C'est SMY ! 👋 Allons-y directement 🚀

Contenu:

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

Étape 1 : Configuration `tsup` pour différents environnements

À la racine du projet, créez le fichier tsup.config.ts et collez le contenu suivant :

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

clean - Nettoyez le répertoire de sortie avant chaque build.

dts - définitions de types pour TypeScript.

entry - spécifiant le point d'entrée.

format - cjs pour les anciens, esm pour les projets de nœuds les plus récents et iife pour les navigateurs.

minify - réduit notre code et réduit la taille du bundle.

Aucune configuration supplémentaire n'est nécessaire, car tsup recherchera automatiquement ce fichier et gérera tout pour nous :)

Maintenant, quittez et réexécutez la commande build .

 npm run build

Vous verrez la sortie suivante dans notre dossier dist .

index.cjs - pour la sortie CJS

index.js - pour ESM

index.global.js - pour les navigateurs

Étape 2 : créer une application de nœud

Dans example-apps/Node , créez un fichier index.js . Collez le contenu suivant :

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

Maintenant, exécutez le fichier avec un nœud dans un terminal séparé et accédez au dossier :

 node index.js

Vous verrez la sortie dans le terminal.

Étape 3 : Créer une application de nœud héritée

Dans example-apps/Legacy-Node , créez un fichier index.cjs et collez le contenu suivant :

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

Maintenant, exécutez le fichier avec un nœud dans un terminal séparé et accédez au dossier :

 node index.cjs

Vous verrez la sortie dans le terminal.

Étape 4 : Créer une application de navigateur

Dans example-apps/Browser , créez un fichier index.html et collez le contenu suivant :

 <!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>

Ouvrez le fichier dans le navigateur, vous devriez voir la réponse suivante dans l'onglet console de l'élément inspect :

Étape 5 : Créer une application React

Créez un lien vers notre SDK pour se comporter comme une bibliothèque de projets sans publication.

 npm link

Dans example-apps , créez une application React, par exemple, avec vite :

 npm create vite@latest

Après avoir créé avec succès une application React, exécutez la commande suivante dans le dossier racine React pour lier notre SDK.

 npm link ts-lib

À la place de ts-lib , il devrait s'agir du nom de votre SDK/Bibliothèque dans le package.json.

Après avoir créé l'application React, ouvrez un fichier de composant tel que App.jsx et intégrez le SDK comme suit :

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

Vue complète:

 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;

Exécutez l'application React et accédez à la console ; cela devrait ressembler à ceci :