O guia moderno para empacotar sua biblioteca JavaScript

Hoje encontrei um repositório no GitHub com algumas sugestões para quando você for empacotar uma biblioteca JavaScript. As orientações estão super resumidas no repositório, mas com alguns links externos para você aprofundar o seu conhecimento.

Segue abaixo os tópicos abordados (visite o repositório para ler os detalhes).

Orientações gerais

• Gere um output para os formatos esm, cjs e umd: Dessa forma, você dá suporte para todo o ecossistema.
• Gere vários arquivos de output: Isso possibilita um melhor tree shaking, mantendo a estrutura do arquivo.
• Não minifique: Permita que os desenvolvedores minifiquem sua biblioteca por conta própria.
• Crie sourcemaps: Ao usar um bundler ou transpilador, gere sourcemaps.
• Crie tipos de TypeScript: Os tipos melhoram a experiência do desenvolvedor.
• Externalize os frameworks: Não inclua uma cópia do React, Vue, etc. em seu pacote.
• Tenha como alvo os navegadores modernos: Use recursos modernos e permita que os desenvolvedores suportem navegadores mais antigos, se necessário.
• Transpile se necessário: Transforme TypeScript ou JSX em chamadas de função.
• Mantenha um registro de alterações (changelog): Facilite aos desenvolvedores acompanharem atualizações e alterações.

Orientações para o package.json

• Defina o campo name: Dê um nome à sua biblioteca.
• Defina o campo version: Publique atualizações em sua biblioteca alterando a versão.
• Defina suas exportações (exports): exports definem a API pública para sua biblioteca.
• Liste os arquivos (files) a serem publicados: files define quais arquivos são incluídos em seu pacote NPM.
• Defina o tipo (type) de módulo padrão para seus arquivos JS: O type determina qual sistema de módulo seus arquivos .js usam.
• Liste quais módulos têm efeitos colaterais (sideEffects): Definir o campo sideEffects permite o tree shaking.
• Defina o campo main: main define a entrada CommonJS.
• Defina o campo module: module define a entrada ESM.
• Defina o campo do browser: browser define o bundle que pode ser usado em tags <script>.
• Defina o campo types: types define os tipos TypeScript.
• Liste suas dependências de pares (peerDependencies): Se você depende de outra estrutura ou biblioteca, defina-a como uma dependência de pares.
• Indique em qual licença (license) sua biblioteca se enquadra: Proteja você e outros colaboradores.