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

esbuild-react

24/07/2024

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 !