0Pricing
React Academy · Aula

Bibliotecas compartilhadas e pacotes internos

Crie bibliotecas compartilhadas de interface e utilitários e importe-as entre aplicativos com aliases de caminho do TypeScript.

Bibliotecas compartilhadas e pacotes internos é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Por que usar bibliotecas compartilhadas?

Em vez de duplicar componentes, ganchos e utilitários em vários aplicativos, extraia-os para projetos de bibliotecas compartilhadas que possam ser usados por qualquer aplicativo no monorrepositório.

Gerando uma biblioteca

Use os geradores do Nx para criar projetos de bibliotecas tipados e compiláveis.

# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui

# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils

# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-access

API pública da biblioteca

Exporte tudo a partir de um único index.ts (a API pública). Os consumidores devem importar somente de @myorg/ui, e não de caminhos internos profundos.

// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';

// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal path

Tipos de bibliotecas: publicáveis versus compiláveis

Bibliotecas compiláveis são compiladas incrementalmente para acelerar as compilações do monorrepositório. Bibliotecas publicáveis também geram um pacote compatível com npm para uso externo.

# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable

# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/ui

Impondo limites entre módulos

Use a regra do ESLint @nx/enforce-module-boundaries para impedir dependências circulares e restringir quais projetos podem importar uns aos outros.

// nx.json or .eslintrc
"depConstraints": [
  // Apps can only import from libs:
  { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
  // Feature libs can't import other feature libs (via shared libs only):
  { "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]

Storybook para bibliotecas compartilhadas

Execute o Storybook com a biblioteca de interface para documentar os componentes de forma isolada, independentemente de qualquer aplicativo.

# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui

# Run Storybook:
npx nx storybook ui

Testando bibliotecas

Cada biblioteca tem seu próprio destino de teste. Execute os testes da biblioteca e de todos os aplicativos afetados quando a biblioteca for alterada.

# Test specific library:
npx nx test ui

# Test all affected by a change:
npx nx affected --target=test

Gerenciamento de versões em monorrepositórios

Em um monorrepositório, todos os pacotes compartilham um único package.json e uma única versão. Para bibliotecas publicáveis, use ferramentas como @jscutlery/semver ou Changesets para gerenciar versões independentes.

Migrando código existente para bibliotecas

Mova o código compartilhado gradualmente para uma biblioteca: crie a biblioteca, mova os arquivos, atualize as importações e deixe que os aliases de caminhos do TypeScript cuidem do restante.

# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original file

Documentação com Compodoc ou Storybook Docs

Use o rótulo autodocs do Storybook ou o Compodoc para gerar documentação da API a partir dos tipos do TypeScript e dos comentários JSDoc nos arquivos da biblioteca.

Verificação rápida

Qual deve ser o único ponto de entrada para os consumidores que importam de uma biblioteca compartilhada do Nx?

Recapitulação

Gere bibliotecas com nx generate, exporte tudo a partir de um único index.ts e imponha limites entre módulos com regras do ESLint. Use bibliotecas compiláveis para obter compilações incrementais mais rápidas e bibliotecas publicáveis quando precisar publicar no npm. Execute o Storybook com bibliotecas de interface para obter uma documentação isolada.

Perguntas Frequentes

A aula “Bibliotecas compartilhadas e pacotes internos” é grátis?

Sim — o texto completo de “Bibliotecas compartilhadas e pacotes internos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Bibliotecas compartilhadas e pacotes internos”?

Crie bibliotecas compartilhadas de interface e utilitários e importe-as entre aplicativos com aliases de caminho do TypeScript. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Bibliotecas compartilhadas e pacotes internos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Criando um monorepositório Nx com aplicativos React
  2. Bibliotecas compartilhadas e pacotes internos
  3. Comandos Nx Affected e armazenamento em cache
  4. Geradores de código e automação do espaço de trabalho
← Voltar para React Academy