Comment créer sa propre librairie TypeScript en 2024 : Un guide pas à pas

Type: blog post
Language: fr-FR
Canonical URL: https://simonboisset.com/blog/create-typescript-library-tsup
Published: 24 juillet 2024
Summary: Dans ce tutoriel, nous allons voir comment créer une librairie TypeScript à partir de zéro. Nous couvrirons la configuration du projet, la compilation, les t...

Dans ce tutoriel, nous allons voir comment créer une librairie TypeScript à partir de zéro. Nous couvrirons la configuration du projet, la compilation, les tests et la publication. Ce guide est conçu pour être accessible aux développeurs ayant une connaissance de base de TypeScript et de npm.
Étape 1 : Initialisation du projet
Commençons par créer un nouveau dossier pour notre projet et initialiser un projet npm.
mkdir ma-librairie-ts
cd ma-librairie-ts
npm init -y
Cette commande crée un fichier package.json de base. Nous le modifierons plus tard.
Étape 2 : Installation des dépendances
Installons TypeScript et les outils nécessaires pour notre projet :
npm install --save-dev typescript tsup vitest
typescript : Le compilateur TypeScript
tsup : Un outil de build pour TypeScript
vitest : Un framework de test rapide
Étape 3 : Configuration de TypeScript
Créons un fichier tsconfig.json à la racine du projet :
{
"include": ["src"],
"exclude": ["/.test.ts"],
"compilerOptions": {
"module": "esnext",
"target": "esnext",
"lib": ["esnext"],
"declaration": true,
"strict": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"outDir": "dist",
"rootDir": "src"
}
}
Cette configuration indique à TypeScript comment compiler notre code.
Étape 4 : Configuration de tsup
Créons un fichier tsup.config.ts pour configurer notre build :
import { defineConfig } from "tsup";
export default defineConfig({
entry: ["src/index.ts"],
clean: true,
format: ["cjs", "esm"],
dts: true,
});
Cette configuration permet de générer des builds CommonJS et ES modules, ainsi que les fichiers de déclaration TypeScript.
Étape 5 : Configuration de Vitest
Créons un fichier vitest.config.ts pour configurer nos tests :
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
globals: true,
environment: "node",
},
});
Étape 6 : Mise à jour du package.json
Mettons à jour notre package.json avec les informations nécessaires :
{
"name": "ma-librairie-ts",
"version": "0.1.0",
"description": "Ma librairie TypeScript",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch",
"test": "vitest run",
"test:watch": "vitest"
},
"keywords": ["typescript", "library"],
"author": "Votre Nom",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/votre-nom-utilisateur/ma-librairie-ts"
},
"bugs": {
"url": "https://github.com/votre-nom-utilisateur/ma-librairie-ts/issues"
},
"homepage": "https://github.com/votre-nom-utilisateur/ma-librairie-ts#readme"
}
Étape 7 : Écriture du code de la librairie
Créons un dossier src et un fichier index.ts à l'intérieur :
mkdir src
touch src/index.ts
Dans src/index.ts, écrivons une fonction simple :
export function greet(name: string): string {
return Hello, ${name}!;
}
Étape 8 : Écriture des tests
Créons un fichier de test src/index.test.ts :
import { expect, test } from "vitest";
import { greet } from "./index";
test("greet function", () => {
expect(greet("World")).toBe("Hello, World!");
});
Étape 9 : Build et test
Exécutons nos scripts pour construire et tester notre librairie :
npm run build
npm test
Si tout se passe bien, vous devriez voir que le test passe et que les fichiers de build sont générés dans le dossier dist.
Étape 10 : Préparation pour la publication
Avant de publier, assurez-vous que votre package.json est à jour avec la bonne version, description, et autres métadonnées.
Étape 11 : Publication sur npm
Si vous êtes prêt à publier votre librairie sur npm, suivez ces étapes :
Créez un compte sur npmjs.com si vous n'en avez pas déjà un.
Connectez-vous à npm via le terminal :
npm login
Publiez votre package :
npm publish
Félicitations ! Vous avez maintenant créé et publié votre propre librairie TypeScript !
Conclusion
Ce tutoriel vous a guidé à travers les étapes de création d'une librairie TypeScript de base. N'oubliez pas d'ajouter de la documentation, des exemples d'utilisation, et de maintenir votre librairie à jour. Bonne chance dans vos futurs projets !

Related links
Blog index: https://simonboisset.com/blog
Website: https://simonboisset.com/