Créer et publier un package npm avec esbuild, typescript et react
Temps de lecture estimé: 4 minutes
02/10/2022
Introduction
Personnellement j'apprécie pouvoir partager mon code avec la communauté open source. Publier des packages npm pour cela est une des principales options. Mais pour s'assurer que son code soit exécutable sur n'importe quel environnement il faut certains prérequis.
La règle numéro 1 à suivre est de supporter le common js.
Pendant longtemps il fallait utiliser un bundler comme rollup, webpack ou babel.
Mais aujourd'hui une nouvelle génération de bundler arrivent, plus performants et plus faciles à paramétrer. esbuild est l'un d'eux et nous allons l'utiliser pour publier notre premier module npm.
Initialisation
Créez un projet et initialisez le.
Votre fichier package.json doit être comme ceci :
Maintenant, installons nos librairies.
Les dev dependencies
Pensez à ajouter react comme peer dependency si vous souhaitez écrire une librairie react avec des hooks ou des composants.
Typescript config
Ajoutez le fichier tsconfig.json
.
On n'utilise pas le compilateur typescript car nous allons utiliser esbuild pour cela. C'est pour ça que
emitDeclarationOnly
est à true
Notre module
Maintenant, on peut écrire le module de nos envies. Voici un exemple basique.
Créez un dossier src
puis un fichier index.tsx
.
Build de notre librairie
On souhaite maintenant builder notre package en CJS avant de le publier.
Configuration esbuild
Ajoutez esbuild :
Créez un script esbuild dans un fichier esbuild.js
:
Ajoutez la commande de build
Enfin, ajoutez le script dans le fichier package.json :
Maintenant, vous pouvez lancer le script :
Npm publish
Avant de publier sur npm vous devez vous authentifier
Ajoutez ces lignes à votre package.json :
Puis publiez votre package :
Félicitations, venez de publier votre propre librairie Typescript.
Automatiser la publication avec les Github actions
Finalement on veut juste publier une nouvelle version quand on déclenche une action sur Github. On va donc ajouter un fichier
.github/workflows/publish.yml
:
Ajoutez votre npm token
Pour faire fonctionner les actions on doit enregistrer un secret NPM_TOKEN.
Il faut générer un access token sur npm :
Copiez le token dans les secrets Github :
Maintenant tout fonctionne, votre publication se fera toute seule.
Je suis Simon Boisset, développeur fullstack freelance. Je travaille principalement avec React, React Native et Node.js. Je suis disponible pour des missions de développement ou de conseil. N'hésitez pas à me contacter sur mon site.