Creación de paquetes npm eficientes con módulos React, TypeScript y CSS: una guía completa

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í: https://github.com/helgastogova/npm-react-typescript-template . 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.

Las características clave incluyen:

1. React & TypeScript : desarrollo de interfaz de usuario moderno con seguridad de tipo fuerte y una experiencia de desarrollador superior.
2. Módulos CSS : diseñar componentes de forma aislada, evitando conflictos CSS y permitiendo el diseño modular.
3. ESLint : garantizar la calidad del código al adherirse a las mejores prácticas de JavaScript y React.
4. Rollup : agrupa de manera eficiente el código React y TypeScript en un solo archivo para su distribución.
5. PostCSS : utiliza funciones CSS de próxima generación y maneja la compatibilidad del navegador.
6. Límite de tamaño : controle el tamaño de su biblioteca y evite que se hinche accidentalmente.

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 .root de TestComponent.module.css no afectará a ninguna otra clase .root en un módulo diferente.

ESLint

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.

En su package.json , tiene:

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

Ejecute el linter con npm run lint . 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.

Enrollar

Rollup 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.

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

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.

Puede ver PostCSS en acción en la configuración de resumen anterior. Usando rollup-plugin-postcss , 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.

Límite de tamaño

El 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.

En su package.json :

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

Luego puede ejecutar npm run size 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.

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 dist , listo para publicarse en npm.

Publicación en npm

Asegúrese de haber configurado el campo name en su package.json 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:

 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 biblioteca npmjs y la gente puede comenzar a usarlo. ¡Usted es maravilloso!

¡Feliz codificación!