0Pricing
Vue Academy · Aula

Publicação no npm e versionamento semântico

Campos de package.json (main, module, exports), registros de alterações, semantic-release e fluxo de publicação no npm.

Publicação no npm e versionamento semântico é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Preparando-se para publicar

A publicação torna sua biblioteca instalável por meio de npm install. Antes disso, package.json deve declarar corretamente os pontos de entrada, e você precisa controlar quais arquivos serão incluídos.

Principal e módulo

main aponta para a compilação CommonJS, destinada a ferramentas mais antigas; module aponta para a compilação ESM, para que os empacotadores modernos escolham a versão que permite a eliminação de código não utilizado.

{
  "main": "./dist/my-ui-lib.cjs.js",
  "module": "./dist/my-ui-lib.es.js"
}

O mapa de exportações

O campo moderno exports define pontos de entrada condicionais. Ele tem precedência sobre main/module e controla o acesso a subcaminhos.

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js",
      "require": "./dist/my-ui-lib.cjs.js"
    },
    "./style.css": "./dist/style.css"
  }
}

Exportações condicionais

As condições import, require e types permitem que Node e os empacotadores resolvam o arquivo correto para ESM, CommonJS e TypeScript, respectivamente.

Controlando os arquivos publicados

Use o campo files para criar uma lista de arquivos permitidos, ou um .npmignore para criar uma lista de arquivos bloqueados. Incluir dist e excluir a origem e os testes mantém o pacote pequeno.

{
  "files": ["dist"]
}

.npmignore

Se preferir uma lista de arquivos bloqueados, .npmignore exclui arquivos mesmo quando nenhum campo files está definido. Sem nenhum dos dois, o npm publica quase tudo.

# .npmignore
src
tests
vite.config.ts
*.log

Pré-visualização com npm pack

Execute npm pack para criar um arquivo compactado e inspecionar exatamente o que seria publicado: uma verificação de segurança essencial antes de disponibilizar o pacote.

npm pack
# inspect the listed files; nothing secret should appear

Versionamento semântico

SemVer usa MAJOR.MINOR.PATCH. Aumente o número de correção para correções compatíveis com versões anteriores, o de menor para funcionalidades compatíveis com versões anteriores e o de principal para mudanças incompatíveis.

Comandos npm version

O comando npm version aumenta a versão em package.json e cria uma tag do git em uma única etapa.

npm version patch   # 1.0.0 -> 1.0.1
npm version minor   # 1.0.1 -> 1.1.0
npm version major   # 1.1.0 -> 2.0.0

npm publish

npm publish envia o pacote. Pacotes públicos com escopo precisam da opção --access public na primeira vez.

npm publish --access public

prepublishOnly e dist-tag

Um script prepublishOnly garante que uma compilação atualizada seja executada antes da publicação, e --tag next publica versões de pré-lançamento sem mover a tag latest.

{
  "scripts": {
    "prepublishOnly": "npm run build"
  }
}
// npm publish --tag next

Verificação rápida

Você adiciona uma propriedade opcional nova sem interromper o uso existente. Qual incremento de versão deve fazer?

Recapitulação

Configure main, module e um mapa condicional de exports (importação/requerimento/tipos), e controle os arquivos incluídos com files ou .npmignore. Faça uma prévia com npm pack, depois aumente as versões conforme o SemVer usando npm version patch/minor/major e publique com npm publish (adicionando --access public para pacotes com escopo).

Perguntas Frequentes

A aula “Publicação no npm e versionamento semântico” é grátis?

Sim — o texto completo de “Publicação no npm e versionamento semântico” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Publicação no npm e versionamento semântico”?

Campos de package.json (main, module, exports), registros de alterações, semantic-release e fluxo de publicação no npm. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 4 de 4.

Quanto tempo leva a aula “Publicação no npm e versionamento semântico”?

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 Vue Academy?

Sim. Cada aula de Vue 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. Configuração do modo de biblioteca do Vite
  2. Declarações TypeScript para bibliotecas de componentes
  3. Tree-shaking e importação automática
  4. Publicação no npm e versionamento semântico
← Voltar para Vue Academy