Web Components, lição 6: Empacotar com Vite (library mode)

Até aqui o <image-gallery> vivia no playground. Para usar em qualquer projeto, ele vira uma lib, e o Vite resolve isso com o library mode.

Dica WC: o library mode do Vite gera um ou mais bundles a partir de um entry, em vez de um app com index.html.

Árvore típica do pacote

image-gallery/
├── package.json
├── vite.config.ts
├── src/
│   ├── index.ts          ← entry: exporta classe + register()
│   ├── image-gallery.ts  ← o Custom Element
│   └── styles.css        ← opcional (ou CSS no shadow)
└── dist/                 ← saída do build

vite.config em library mode

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'ImageGallery',
      formats: ['es', 'umd'],
      fileName: (format) => `image-gallery.${format}.js`,
    },
  },
});

• build.lib.entry aponta para o src/index.ts, que exporta a classe e o register.
• name: 'ImageGallery' é o global usado no bundle UMD.
• formats: ['es', 'umd'] gera os dois bundles de uma vez.
• vite build gera dist/image-gallery.es.js e dist/image-gallery.umd.js.

HTML de desenvolvimento

<!DOCTYPE html>
<html>
  <body>
    <image-gallery columns="3">
      <!-- imgs -->
    </image-gallery>
    <script type="module" src="/src/index.ts"></script>
  </body>
</html>

As lições 7 e 8 fecham o ciclo: export dual e consumo no app.

Pratique no playground

• ▶️ Árvore Vite lib (conceitual)

Snippets relacionados:

• 🧩 Vite lib mode
• 🧩 package.json exports

📚 Lição completa na trilha grátis: Empacotar com Vite (library mode)

---

← Anterior: Lição 5: Mesma galeria no Vue

Próxima: Lição 7: Export dual: classe + register →