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 : . 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. https://github.com/helgastogova/npm-react-typescript-template Les fonctionnalités clés incluent : : développement d'interface utilisateur moderne avec une sécurité de type élevée et une expérience de développement supérieure. React & TypeScript : styliser les composants de manière isolée, éviter les conflits CSS et permettre une conception modulaire. Modules CSS : Assurer la qualité du code en adhérant aux meilleures pratiques JavaScript et React. ESLint : regrouper efficacement le code React et TypeScript dans un seul fichier pour la distribution. Rollup : Utilisation des fonctionnalités CSS de nouvelle génération et gestion de la compatibilité des navigateurs. PostCSS : Surveillez la taille de votre bibliothèque et évitez tout gonflement accidentel de la taille. Limite de 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 de n'affectera aucune autre classe dans un module différent. .root TestComponent.module.css .root 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. ESLint Dans votre , vous avez : package.json "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" } Exécutez le linter avec . 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. npm run lint Cumul 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é. Rollup 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 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. PostCSS Vous pouvez voir PostCSS en action dans la configuration Rollup ci-dessus. En utilisant le , 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. rollup-plugin-postcss Limite de taille 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. Size Limit Dans votre : package.json "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ] Vous pouvez ensuite exécuter 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. npm run size 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 , prêt à être publié sur npm. dist Publication sur npm Assurez-vous que vous avez défini le champ dans votre 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 : name package.json 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 et les utilisateurs peuvent commencer à l'utiliser. Vous êtes génial! bibliothèque npmjs Bon codage !
