Création de packages npm efficaces avec les modules React, TypeScript et CSS : un guide complet

La création de packages npm réutilisables peut rendre votre processus de développement plus efficace et agréable. Dans cet article, nous vous guiderons dans la création d'une configuration de projet moderne et robuste à l'aide de React, TypeScript, des modules CSS et d'autres outils.

Avant de commencer, vous pouvez trouver le code source ici : https://github.com/helgastogova/npm-react-typescript-template . Ce référentiel sert de base pour créer des packages npm à l'aide de React et TypeScript. Il est préconfiguré avec un processus de génération et un ensemble de packages recommandés pour un workflow de développement moderne.

Les fonctionnalités clés incluent :

1. React & TypeScript : développement d'interface utilisateur moderne avec une sécurité de type élevée et une expérience de développement supérieure.
2. Modules CSS : styliser les composants de manière isolée, éviter les conflits CSS et permettre une conception modulaire.
3. ESLint : Assurer la qualité du code en adhérant aux meilleures pratiques JavaScript et React.
4. Rollup : regrouper efficacement le code React et TypeScript dans un seul fichier pour la distribution.
5. PostCSS : Utilisation des fonctionnalités CSS de nouvelle génération et gestion de la compatibilité des navigateurs.
6. Limite de taille : Surveillez la taille de votre bibliothèque et évitez tout gonflement accidentel de la taille.

Plongeons dans chaque outil plus en détail.

Modules CSS

Les modules CSS servent de balise de sécurité dans le domaine du chaos stylistique. Ils implémentent une portée locale pour vos styles, évitant les conflits et les problèmes de chevauchement. Chaque module CSS sera "encapsulé" dans le composant, garantissant que les styles que vous définissez ne fuiront pas et n'affecteront pas d'autres éléments involontairement.

Considérez ce composant simple où nous utilisons le module CSS :

 // TestComponent.tsx import React from 'react'; import s from './TestComponent.module.css'; type TestComponentProps = { text?: string; }; export const TestComponent: React.FC<TestComponentProps> = ({ text }) => { return <div className={s.root}>{text ?? 'Hello!'}</div>; };

Et son module CSS associé :

 /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; }

Dans ce cas, la classe .root de TestComponent.module.css n'affectera aucune autre classe .root dans un module différent.

ESLint

ESLint est comme un phare qui vous guide à travers une mer tumultueuse de code. Il aide à maintenir la qualité du code, à détecter les erreurs et à appliquer les meilleures pratiques de codage avant qu'elles ne deviennent des problèmes.

Dans votre package.json , vous avez :

 "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" }

Exécutez le linter avec npm run lint . ESLint analysera vos fichiers TypeScript et vous avertira de tout problème potentiel. Ceci est particulièrement pratique pour les grandes bases de code où il est facile pour de petites erreurs ou incohérences de s'infiltrer.

Cumul

Rollup est l'entraîneur personnel de votre code. Il prend votre JavaScript, TypeScript et CSS et les regroupe dans un package léger et efficace prêt à être distribué.

Il est léger et rapide, mais le véritable avantage vient de sa capacité à « secouer les arbres ». Le cumul peut éliminer le code inutilisé du bundle final, ce qui rend votre package aussi léger que possible. Voici un exemple de ce à quoi votre configuration de cumul pourrait ressembler :

 // rollup.config.js const postcss = require('rollup-plugin-postcss'); const typescript = require('@rollup/plugin-typescript'); const peerDepsExternal = require('rollup-plugin-peer-deps-external'); const resolve = require('@rollup/plugin-node-resolve').default; const commonjs = require('@rollup/plugin-commonjs'); module.exports = { input: 'src/index.tsx', output: { dir: 'dist', format: 'cjs', sourcemap: true, }, plugins: [ peerDepsExternal(), resolve(), typescript(), commonjs(), postcss({ modules: true, }), ], };

PostCSS

PostCSS est comme un voyageur temporel, vous permettant d'écrire du CSS en utilisant la syntaxe et les fonctionnalités futures. Il voyage ensuite dans le temps (pour ainsi dire), transformant ces styles modernes en code que même les navigateurs plus anciens peuvent comprendre.

Vous pouvez voir PostCSS en action dans la configuration Rollup ci-dessus. En utilisant le rollup-plugin-postcss , votre CSS moderne est transformé et inclus dans votre bundle final. La beauté de ceci est que vous pouvez écrire du CSS en utilisant les dernières fonctionnalités sans vous soucier de la compatibilité du navigateur.

Limite de taille

Size Limit est le gardien toujours vigilant, s'assurant que votre bibliothèque ne soit pas trop gonflée. Il calcule le coût réel de votre bibliothèque en ajoutant à la fois le JavaScript et le CSS qui seront téléchargés par les utilisateurs. C'est un outil précieux pour vous aider à contrôler la taille de votre paquet.

Dans votre package.json :

 "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ]

Vous pouvez ensuite exécuter npm run size pour vérifier la taille de votre bundle. S'il dépasse la limite que vous avez définie (dans ce cas, 10 Ko), le script génère une erreur. C'est un excellent moyen de vous assurer que vous n'ajoutez pas sans le savoir aux temps de téléchargement de vos utilisateurs.

Installation

Pour commencer à utiliser ce modèle, clonez le dépôt :

 git clone https://github.com/helgastogova/npm-react-typescript-template.git

Naviguez dans le répertoire :

 cd npm-react-typescript-template

Installez les dépendances :

 npm install

Vous êtes prêt à commencer à développer votre package ! Le point d'entrée est src/index.tsx

Construire le paquet

Après avoir créé votre propre composant et lorsque vous êtes prêt à créer votre package pour la distribution, exécutez :

 npm run build

Votre package construit sera dans le répertoire dist , prêt à être publié sur npm.

Publication sur npm

Assurez-vous que vous avez défini le champ name dans votre package.json sur le nom de package souhaité. N'oubliez pas non plus de mettre à jour le numéro de version avant chaque nouvelle publication. Une fois cela fait, connectez-vous à npm en utilisant :

 npm login

Saisissez votre nom d'utilisateur, votre mot de passe et votre e-mail. Une fois connecté, vous pouvez publier votre package avec :

 npm publish

Vous avez maintenant publié votre composant dans la bibliothèque npmjs et les utilisateurs peuvent commencer à l'utiliser. Vous êtes génial!

Bon codage !