Construindo pacotes npm eficientes com módulos React, TypeScript e CSS: um guia completo

A criação de pacotes npm reutilizáveis pode tornar seu processo de desenvolvimento mais eficiente e agradável. Neste artigo, vamos orientá-lo na criação de uma configuração de projeto moderna e robusta usando React, TypeScript, CSS Modules e outras ferramentas.

Antes de começar, você pode encontrar o código-fonte aqui: https://github.com/helgastogova/npm-react-typescript-template . Este repositório serve como base para a criação de pacotes npm usando React e TypeScript. Ele é pré-configurado com um processo de compilação e um conjunto de pacotes recomendados para um fluxo de trabalho de desenvolvimento moderno.

Os principais recursos incluem:

1. React & TypeScript : desenvolvimento de interface do usuário moderno com forte segurança de tipo e uma experiência de desenvolvedor superior.
2. Módulos CSS : estilizando componentes de forma isolada, evitando conflitos de CSS e permitindo o design modular.
3. ESLint : Garantindo a qualidade do código aderindo às melhores práticas de JavaScript e React.
4. Rollup : agrupando com eficiência o código React e TypeScript em um único arquivo para distribuição.
5. PostCSS : Utilizando recursos CSS de última geração e lidando com a compatibilidade do navegador.
6. Limite de tamanho : monitorando o tamanho da sua biblioteca e evitando o aumento acidental do tamanho.

Vamos nos aprofundar em cada ferramenta de forma mais abrangente.

Módulos CSS

Os módulos CSS servem como um farol de segurança no reino do caos de estilo. Eles implementam o escopo local para seus estilos, evitando conflitos e problemas de sobreposição. Cada módulo CSS será "encapsulado" no componente, garantindo que os estilos que você definir não vazem e afetem outros elementos involuntariamente.

Considere este componente simples onde usamos o 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>; };

E seu módulo CSS associado:

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

Nesse caso, a classe .root de TestComponent.module.css não afetará nenhuma outra classe .root em um módulo diferente.

ESLintName

O ESLint é como um farol guiando você por um tumultuado mar de códigos. Ele ajuda a manter a qualidade do código, detectando erros e aplicando as melhores práticas de codificação antes que se tornem problemas.

Em seu package.json , você tem:

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

Execute o linter com npm run lint . O ESLint examinará seus arquivos TypeScript e o avisará sobre possíveis problemas. Isso é particularmente útil para grandes bases de código, onde é fácil a ocorrência de pequenos erros ou inconsistências.

Rolar

Rollup é o personal trainer do seu código. Ele pega seu JavaScript, TypeScript e CSS e os agrupa em um pacote enxuto e eficiente, pronto para distribuição.

É leve e rápido, mas o benefício real vem de sua capacidade de "agitar a árvore". O rollup pode eliminar o código não utilizado do pacote final, tornando seu pacote o mais enxuto possível. Aqui está um exemplo de como sua configuração de Rollup pode parecer:

 // 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, }), ], };

Pós-CSS

O PostCSS é como um viajante do tempo, permitindo que você escreva CSS usando sintaxe e recursos futuros. Em seguida, ele viaja no tempo (por assim dizer), transformando esses estilos modernos em códigos que até navegadores mais antigos podem entender.

Você pode ver o PostCSS em ação na configuração do Rollup acima. Usando o rollup-plugin-postcss , seu CSS moderno é transformado e incluído em seu pacote final. A beleza disso é que você pode escrever CSS usando os recursos mais recentes sem se preocupar com a compatibilidade do navegador.

Limite de tamanho

Limite de tamanho é o vigia sempre vigilante, garantindo que sua biblioteca não fique muito inchada. Ele calcula o custo real da sua biblioteca adicionando o JavaScript e o CSS que serão baixados pelos usuários. É uma ferramenta valiosa para ajudá-lo a manter o tamanho do pacote sob controle.

Em seu package.json :

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

Você pode executar npm run size para verificar o tamanho do seu pacote. Se exceder o limite definido (neste caso, 10 KB), o script gerará um erro. É uma ótima maneira de garantir que você não esteja adicionando inadvertidamente aos tempos de download de seus usuários.

Configurar

Para começar a usar este modelo, clone o repositório:

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

Navegue até o diretório:

 cd npm-react-typescript-template

Instale as dependências:

 npm install

Você está pronto para começar a desenvolver seu pacote! O ponto de entrada é src/index.tsx

Construindo o Pacote

Depois de criar seu próprio componente e quando estiver pronto para construir seu pacote para distribuição, execute:

 npm run build

Seu pacote construído estará no diretório dist , pronto para ser publicado no npm.

Publicando no npm

Certifique-se de ter definido o campo name em seu package.json para o nome do pacote desejado. Além disso, lembre-se de atualizar o número da versão antes de cada nova publicação. Feito isso, faça login no npm usando:

 npm login

Digite seu nome de usuário, senha e e-mail. Uma vez logado, você pode publicar seu pacote com:

 npm publish

Agora você publicou seu componente na biblioteca npmjs e as pessoas podem começar a usá-lo. Você é incrível!

Codificação feliz!