La creación de paquetes npm reutilizables puede hacer que su proceso de desarrollo sea más eficiente y agradable. En este artículo, lo guiaremos a través de la creación de una configuración de proyecto moderna y sólida utilizando React, TypeScript, módulos CSS y otras herramientas. Antes de comenzar, puede encontrar el código fuente aquí: . Este repositorio sirve como base para crear paquetes npm utilizando React y TypeScript. Está preconfigurado con un proceso de compilación y un conjunto de paquetes recomendados para un flujo de trabajo de desarrollo moderno. https://github.com/helgastogova/npm-react-typescript-template Las características clave incluyen: : desarrollo de interfaz de usuario moderno con seguridad de tipo fuerte y una experiencia de desarrollador superior. React & TypeScript : diseñar componentes de forma aislada, evitando conflictos CSS y permitiendo el diseño modular. Módulos CSS : garantizar la calidad del código al adherirse a las mejores prácticas de JavaScript y React. ESLint : agrupa de manera eficiente el código React y TypeScript en un solo archivo para su distribución. Rollup : utiliza funciones CSS de próxima generación y maneja la compatibilidad del navegador. PostCSS : controle el tamaño de su biblioteca y evite que se hinche accidentalmente. Límite de tamaño Profundicemos en cada herramienta de forma más completa. Módulos CSS Los módulos CSS sirven como un faro de seguridad en el ámbito del caos de estilo. Implementan el alcance local para sus estilos, evitando conflictos y problemas de superposición. Cada módulo CSS se "encapsulará" en el componente, lo que garantiza que los estilos que defina no se filtren y afecten a otros elementos sin querer. Considere este componente simple donde usamos el Módulo 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>; }; Y su Módulo CSS asociado: /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; } En este caso, la clase de no afectará a ninguna otra clase en un módulo diferente. .root TestComponent.module.css .root ESLint es como un faro que lo guía a través de un tumultuoso mar de código. Ayuda a mantener la calidad del código, detecta errores y aplica las mejores prácticas de codificación antes de que se conviertan en problemas. ESLint En su , tiene: package.json "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" } Ejecute el linter con . ESLint escaneará sus archivos TypeScript y le advertirá sobre cualquier problema potencial. Esto es particularmente útil para grandes bases de código donde es fácil que aparezcan pequeños errores o inconsistencias. npm run lint Enrollar es el entrenador físico personal de su código. Toma su JavaScript, TypeScript y CSS y los agrupa en un paquete simple y eficiente listo para su distribución. Rollup Es liviano y rápido, pero el beneficio real proviene de su capacidad de "sacudir árboles". El resumen puede eliminar el código no utilizado del paquete final, lo que hace que su paquete sea lo más eficiente posible. Este es un ejemplo de cómo se vería la configuración de su resumen: // 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 es como un viajero en el tiempo, permitiéndote escribir CSS usando sintaxis y características futuras. Luego viaja en el tiempo (por así decirlo), transformando estos estilos modernos en código que incluso los navegadores más antiguos pueden entender. PostCSS Puede ver PostCSS en acción en la configuración de resumen anterior. Usando , su CSS moderno se transforma y se incluye en su paquete final. Lo bueno de esto es que puedes escribir CSS usando las funciones más recientes sin preocuparte por la compatibilidad del navegador. rollup-plugin-postcss Límite de tamaño es el vigilante siempre vigilante, asegurándose de que su biblioteca no se llene demasiado. Calcula el costo real de su biblioteca agregando JavaScript y CSS que los usuarios descargarán. Es una herramienta valiosa para ayudarlo a mantener el tamaño de su paquete bajo control. El límite de tamaño En su : package.json "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ] Luego puede ejecutar para verificar el tamaño de su paquete. Si excede el límite que ha establecido (en este caso, 10 KB), el script arrojará un error. Es una excelente manera de asegurarse de que no está aumentando sin saberlo los tiempos de descarga de sus usuarios. npm run size Configuración Para comenzar a usar esta plantilla, clone el repositorio: git clone https://github.com/helgastogova/npm-react-typescript-template.git Navega al directorio: cd npm-react-typescript-template Instala las dependencias: npm install ¡Ya está todo listo para comenzar a desarrollar su paquete! El punto de entrada es src/index.tsx Construyendo el paquete Después de crear su propio componente y cuando esté listo para construir su paquete para su distribución, ejecute: npm run build Su paquete creado estará en el directorio , listo para publicarse en npm. dist Publicación en npm Asegúrese de haber configurado el campo en su con el nombre de paquete deseado. Además, recuerda actualizar el número de versión antes de cada nueva publicación. Una vez hecho esto, inicie sesión en npm usando: name package.json npm login Ingrese su nombre de usuario, contraseña y correo electrónico. Una vez que haya iniciado sesión, puede publicar su paquete con: npm publish Ahora ha publicado su componente en la y la gente puede comenzar a usarlo. ¡Usted es maravilloso! biblioteca npmjs ¡Feliz codificación!
