Développement du SDK TypeScript : un enfant de 5 ans pourrait suivre cette étape par étape ~ Partie 1 : Notre premier MVP

Bonjouroooooo !

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

Contenu:

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

1️⃣ Quoi -

Le SDK (parfois également appelé bibliothèque) sert de plug-in dans les applications pour dériver des fonctionnalités supplémentaires de la technologie.

2️⃣ Pourquoi -

Le développement de SDK avec TypeScript offre une fiabilité sur le long terme grâce à la sécurité des types et à la maintenance à long terme.

3️⃣ Comment -

Les étapes fondamentales requises pour créer le SDK sont les suivantes :

1. Initialiser le projet avec les bons paramètres de workflow.
2. Choisir Bundler et comprendre son objectif.
3. Comprendre ESM, CJS, IIFE UMD pour exécuter le SDK sur différents environnements.
4. Publication en tant que bibliothèque sur NPM, versionnage sémantique et licence.
5. NPM pour les SPA et CDN pour les navigateurs.

Dans la première partie, nous allons créer notre premier SDK de base pour acquérir une compréhension de base.

Étape 1 : initialiser le projet

Exécutez la commande suivante pour définir le projet dans un nouveau dossier :

 npm init -y

"-y" est par défaut oui pour toutes les invites de suivi. Vous pourrez le modifier ultérieurement dans le Package.json comme l'auteur, la licence, la version, etc.

Rendez-vous sur package.json et ajoutez type: module pour fonctionner avec le dernier système de modules EcmaScript (ESM).

Votre package.json devrait ressembler à ceci :

 { "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" }

Étape 2 : Installer les bibliothèques de développement fondamentales

1. Manuscrit
2. @types/node - pour travailler TypeScript avec NodeJS.
3. tsup - Le moyen le plus simple et le plus rapide de regrouper vos bibliothèques TypeScript.

COPIE

 npm i typescript @types/node tsup -D

Étape 3 : Configurer tsconfig pour les paramètres TypeScript

Créez un fichier tsconfig.json à la racine du projet.

COPIE

 touch tsconfig.json

Accédez au fichier et collez la configuration suivante :

 { "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"] }

Vous pouvez survoler chaque propriété pour en savoir plus.

La chose fondamentale à comprendre ici est :

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

1. " NodeNext est la bonne option pour créer des bibliothèques car il vous empêche d'émettre des ESM avec des spécificateurs de module qui ne fonctionnent que dans les bundles mais qui planteront dans Node.js. Lors de l'écriture de code conventionnel, en faisant preuve de bon sens et en s'appuyant sur des dépendances de haute qualité, son la sortie est généralement hautement compatible avec les bundles et autres environnements d'exécution. Vous pouvez en savoir plus ici : https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap - Permet la génération de fichiers sources. Ces fichiers permettent aux débogueurs et à d'autres outils d'afficher le code source TypeScript d'origine lorsqu'ils travaillent avec les fichiers JavaScript émis. Vous pouvez le désactiver pour la production.

   
   

3. outDir - Spécifiez un dossier de sortie pour tous les fichiers émis.

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

1. declaration - Générez des fichiers .d.ts à partir des fichiers TypeScript et JavaScript de votre projet.

   
   

2. lib - Spécifiez un ensemble de fichiers de déclaration de bibliothèque groupés qui décrivent l'environnement d'exécution cible. es2022 est destiné aux applications de nœuds comme React et dom & dom.iterable pour exécuter la bibliothèque dans le navigateur.

Étape 4 : Écrivez notre premier code

Créez un fichier index.ts et écrivez le code de base suivant :

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

Construisez notre premier code :

COPIE

 tsup ./index.ts

Vous pouvez maintenant voir que nous avons un dossier dist avec un fichier de sortie index.cjs

Intégrons et exécutons notre premier SDK !

Créez un fichier app.js et collez le code suivant :

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

Comme nous n'avons pas publié notre SDK, nous établissons un lien direct avec la version locale.

Maintenant, lancez notre première application

 node app.js

Vous devriez voir le résultat suivant :

 3 1

Félicitations 🎉🥳 🚀🚀🚀 Nous venons de créer et d'exécuter notre premier SDK !

Emballer:

Nous venons de terminer les étapes de base pour créer et exécuter notre premier SDK. Passez à la partie 2, où nous créerons une structure de dossiers de base et intégrerons un point de terminaison d'API externe 🚀

.....

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