Skip to content

← Trail· Lesson 6 of 8

Package with Vite (lib mode)

Package tree, vite.config library mode, and Custom Element entry.

TODO i18n: Full body translation pending. Title and description are localized; body stays in Portuguese for now.

Até aqui o CE vivia no playground. Em produção você publica uma lib.

Árvore típica

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 (lib 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`,
    },
  },
});

HTML shell de desenvolvimento

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

O exemplo Árvore Vite lib documenta o mapa mental; as lições 7–8 fecham export dual e consumo.

Practice