# Sistema de Build

Chamilo utiliza **Webpack 5** através do **Symfony Webpack Encore** para construir ativos de frontend. A configuração completa de build está em `webpack.config.js` na raiz do projeto.

A saída é gravada em `public/build/`, servida sob o caminho público `/build`.

## Pontos de Entrada

### JavaScript

| Entrada                   | Fonte                                  | Finalidade                                      |
| ------------------------- | -------------------------------------- | ----------------------------------------------- |
| `vue`                     | `assets/vue/main.js`                   | Aplicação principal Vue 3                       |
| `vue_installer`           | `assets/vue/main_installer.js`         | Assistente de instalação                        |
| `legacy_app`              | `assets/js/legacy/app.js`              | JavaScript legado                               |
| `legacy_exercise`         | `assets/js/legacy/exercise.js`         | Player de exercícios                            |
| `legacy_lp`               | `assets/js/legacy/lp.js`               | Player de caminho de aprendizagem               |
| `legacy_document`         | `assets/js/legacy/document.js`         | Visualizador de documentos                      |
| `legacy_free-jqgrid`      | `assets/js/legacy/free-jqgrid.js`      | Widget de grade legado                          |
| `legacy_framereadyloader` | `assets/js/legacy/frameReadyLoader.js` | Carregador de frame pronto para iframes legados |
| `translatehtml`           | `assets/js/translatehtml.js`           | Auxiliar de tradução de HTML                    |
| `glossary_auto`           | `assets/js/glossary-auto.js`           | Destaque automático de termos de glossário      |

### CSS

| Entrada              | Fonte                            |
| -------------------- | -------------------------------- |
| `app`                | `assets/css/app.scss`            |
| `css/chat`           | `assets/css/chat.scss`           |
| `css/document`       | `assets/css/document.scss`       |
| `css/editor`         | `assets/css/editor.scss`         |
| `css/editor_content` | `assets/css/editor_content.scss` |
| `css/markdown`       | `assets/css/markdown.scss`       |
| `css/print`          | `assets/css/print.scss`          |
| `css/responsive`     | `assets/css/responsive.scss`     |
| `css/scorm`          | `assets/css/scorm.scss`          |

## Recursos de Build

* **Vue 3 SFC** — Componentes de arquivo único `.vue` compilados por `vue-loader`; o compilador de tempo de execução está desativado (`runtimeCompilerBuild: false`), então todos os templates devem ser pré-compilados
* **TypeScript** — Modo de transpiração apenas (`transpileOnly: true`) para builds rápidos, sem verificação de tipos durante o build
* **Sass/SCSS** — Suporte completo a SCSS via `sass-loader`
* **Tailwind CSS** — CSS utilitário processado inline via PostCSS (configurado dentro de `webpack.config.js`; não há um arquivo separado `postcss.config.js`)
* **Babel** — Transpilação de ES6+ com `@babel/preset-env` e polyfills do `core-js@3` (`useBuiltIns: "usage"`)
* **jQuery auto-provision** — `autoProvidejQuery()` torna `$` e `jQuery` disponíveis globalmente sem importações explícitas, suportando código legado
* **Source maps** — Habilitado apenas em desenvolvimento
* **Single runtime chunk** — Runtime compartilhado para todas as entradas
* **Filesystem cache** — Cache persistente de sistema de arquivos do Webpack está habilitado para acelerar rebuilds incrementais
* **Chunk namespacing** — `output.uniqueName` e `output.chunkLoadingGlobal` estão definidos como `"chamilo"` / `"webpackChunkChamilo"` para evitar colisões de carregamento de chunks quando múltiplos bundles Webpack coexistem em uma página

## Recursos Exclusivos de Produção

* **Versionamento** — Sufixos de hash de conteúdo em todos os nomes de arquivos de saída (`enableVersioning()`)
* **Integridade de Subrecursos** — Atributos `integrity` em tags `<script>` e `<link>` (`enableIntegrityHashes()`)
* **Limpeza de Saída** — `public/build/` é limpo antes de cada build de produção

### Cópias de ativos sem hash (`CopyUnhashedAssetsPlugin`)

Algumas páginas PHP legadas referenciam ativos por um nome de arquivo fixo e não podem usar o manifesto do Webpack. Um plugin personalizado `CopyUnhashedAssetsPlugin` (definido no final de `webpack.config.js`) copia certos arquivos de produção com hash para um caminho adicional sem hash após cada build:

| Arquivo com hash                             | Cópia sem hash                        |
| -------------------------------------------- | ------------------------------------- |
| `legacy_document.[hash].js`                  | `legacy_document.js`                  |
| `legacy_exercise.[hash].js`                  | `legacy_exercise.js`                  |
| `legacy_framereadyloader.[hash].js` / `.css` | `legacy_framereadyloader.js` / `.css` |
| `css/document.[hash].css`                    | `css/document.css`                    |
| `css/editor_content.[hash].css`              | `css/editor_content.css`              |
| `glossary_auto.[hash].js`                    | `glossary_auto.js`                    |

## Ativos de Biblioteca Copiados

`copyFiles()` copia vários pacotes npm diretamente para `public/build/libs/` sem empacotá-los, para uso via tags `<script>` / `<link>` em templates legados:

* `flatpickr` (JS + CSS + locales)
* `chart.js`
* `mediaelement` + `mediaelement-plugins`
* `moment` locales
* `select2` (JS + CSS)
* `qtip2`
* `readmore-js`
* `js-cookie`
* `pwstrength-bootstrap`
* `multiselect-two-sides`

## Comandos de Build

```bash
# Build de desenvolvimento
yarn encore dev

# Build de desenvolvimento com observação de arquivos
yarn encore dev --watch

# Build de produção (minificado, versionado, hashes de integridade)
yarn encore production
```

***

## Configuração do Tailwind

O Tailwind está configurado no arquivo `tailwind.config.js`. Pontos principais:

* **`important: true`** — Todas as utilidades geradas incluem `!important`, permitindo que elas substituam os estilos dos componentes PrimeVue sem a necessidade de truques adicionais de especificidade
* **Caminhos de conteúdo** — O Tailwind escaneia `assets/**/*.{js,vue}`, `public/main/**/*.{php,twig,tpl}`, `public/plugin/**/*.{php,twig,tpl}` e `src/CoreBundle/Resources/views/**/*.html.twig` para uso de classes
* **Sistema de cores com variáveis CSS** — Cada token de cor (primária, secundária, terciária, sucesso, informação, aviso, perigo) é suportado por uma propriedade personalizada CSS (por exemplo, `--color-primary-base`) definida por tema em `var/themes/[theme-name]/colors.css`. Os valores são trios de canais RGB separados por espaço, possibilitando o uso de utilidades de opacidade do Tailwind (`bg-primary/50`)
* **Escala de fonte personalizada** — Pares de tamanho/altura de linha `body-1`, `body-2`, `caption`, `tiny` são adicionados via `theme.extend.fontSize`
* **Plugins** — `@tailwindcss/forms` e `@tailwindcss/typography` estão habilitados

O PostCSS (Tailwind + Autoprefixer) está configurado inline dentro de `webpack.config.js` por meio de `enablePostCssLoader()` — não há um arquivo independente `postcss.config.js`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chamilo.org/2.x-pt/guia-do-desenvolvedor/developer-guide/frontend/build-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.