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: . 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. https://github.com/helgastogova/npm-react-typescript-template Os principais recursos incluem: : desenvolvimento de interface do usuário moderno com forte segurança de tipo e uma experiência de desenvolvedor superior. React & TypeScript : estilizando componentes de forma isolada, evitando conflitos de CSS e permitindo o design modular. Módulos CSS : Garantindo a qualidade do código aderindo às melhores práticas de JavaScript e React. ESLint : agrupando com eficiência o código React e TypeScript em um único arquivo para distribuição. Rollup : Utilizando recursos CSS de última geração e lidando com a compatibilidade do navegador. PostCSS : monitorando o tamanho da sua biblioteca e evitando o aumento acidental do tamanho. Limite de 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 de não afetará nenhuma outra classe em um módulo diferente. .root TestComponent.module.css .root ESLintName é 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. O ESLint Em seu , você tem: package.json "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" } Execute o linter com . 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. npm run lint Rolar é 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. Rollup É 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 é 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. O PostCSS Você pode ver o PostCSS em ação na configuração do Rollup acima. Usando o , 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. rollup-plugin-postcss 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. Limite de tamanho Em seu : package.json "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ] Você pode executar 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. npm run size 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 , pronto para ser publicado no npm. dist Publicando no npm Certifique-se de ter definido o campo em seu 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: name package.json 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 e as pessoas podem começar a usá-lo. Você é incrível! biblioteca npmjs Codificação feliz!
