Bonjouroooooo !  J'espère que vous allez bien ! C'est SMY ! 👋 Allons-y directement 🚀  Il s'agit de la troisième partie de notre   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é. série de développement de SDK  Contenu:  ⚡  Setting up tsup for different execution environments  ⚡  Creating our apps  Étape 1 : Configuration   pour différents environnements tsup  À la racine du projet, créez le fichier   et collez le contenu suivant : tsup.config.ts   import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });    - Nettoyez le répertoire de sortie avant chaque build. clean    - définitions de types pour TypeScript. dts    - spécifiant le point d'entrée. entry    -   pour les anciens,   pour les projets de nœuds les plus récents et   pour les navigateurs. format cjs esm iife    - réduit notre code et réduit la taille du bundle. minify  Aucune configuration supplémentaire n'est nécessaire, car   recherchera automatiquement ce fichier et gérera tout pour nous :) tsup  Maintenant, quittez et réexécutez la commande   . build   npm run build  Vous verrez la sortie suivante dans notre dossier   .  dist    - pour la sortie CJS index.cjs    - pour ESM index.js    - pour les navigateurs index.global.js  Étape 2 : créer une application de nœud  Dans   , créez un fichier   . Collez le contenu suivant : example-apps/Node index.js   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   , créez un fichier   et collez le contenu suivant : example-apps/Legacy-Node index.cjs   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   , créez un fichier   et collez le contenu suivant : 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>  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   , créez une application React, par exemple, avec vite : example-apps   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   , il devrait s'agir du nom de votre SDK/Bibliothèque dans le package.json. ts-lib  Après avoir créé l'application React, ouvrez un fichier de composant tel que   et intégrez le SDK comme suit : App.jsx   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 :   Emballer:  Nous venons de terminer les étapes pour créer et exécuter notre SDK dans différents environnements.  Rendez-vous à la partie 4 pour publier notre SDK.  .....  Vous disposez désormais des connaissances nécessaires pour créer votre propre SDK. Bon codage ! 🚀  C'est tout, les amis ! J'espère que c'était une bonne lecture pour vous. Merci! ✨  👉 Suivez-moi   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

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Make resilience your competitive advantage

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps