Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
mrcego committed Nov 2, 2023
1 parent fac9bf7 commit 8ed8dcd
Show file tree
Hide file tree
Showing 17 changed files with 607 additions and 453 deletions.
4 changes: 4 additions & 0 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,10 @@ export default defineConfig({
text: 'Awesome Vite',
link: 'https://github.com/vitejs/awesome-vite',
},
{
text: 'ViteConf',
link: 'https://viteconf.org',
},
{
text: 'DEV Community',
link: 'https://dev.to/t/vite',
Expand Down
8 changes: 4 additions & 4 deletions docs/.vitepress/theme/components/AsideSponsors.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,19 @@ const sponsors = computed(() => {
</script>

<template>
<a class="viteconf" href="https://viteconf.org/23" target="_blank">
<!-- <a class="viteconf" href="https://viteconf.org/23" target="_blank">
<img width="22" height="22" src="/viteconf.svg" />
<span>
<p class="extra-info">Free Online Conference</p>
<p class="heading">ViteConf 23 - Oct 5</p>
<p class="extra-info">Get your ticket now!</p>
</span>
</a>
</a> -->
<VPDocAsideSponsors v-if="data" :data="sponsors" />
</template>

<style>
.viteconf {
/* .viteconf {
margin-top: 1rem;
margin-bottom: 1rem;
border-radius: 14px;
Expand Down Expand Up @@ -79,5 +79,5 @@ const sponsors = computed(() => {
}
.viteconf:hover .extra-info {
opacity: 0.9;
}
} */
</style>
2 changes: 1 addition & 1 deletion docs/config/build-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ type ResolveModulePreloadDependenciesFn = (
context: {
importer: string
},
) => (string | { runtime?: string })[]
) => string[]
```
Se llamará a la función `resolveDependencies` para cada importación dinámica con una lista de los fragmentos de los que depende, y también se llamará para cada fragmento importado en los archivos de entrada HTML. Se puede devolver un nuevo array de dependencias con estas dependencias filtradas, u otras más inyectadas, y sus rutas modificadas. Las rutas de `deps` son relativas a `build.outDir`. Se permite tambien retornar una ruta relativa al `hostId` para `hostType === 'js'`, en cuyo caso se usa `new URL(dep, import.meta.url)` para obtener una ruta absoluta al inyectar la precarga de este módulo en el encabezado HTML.
Expand Down
58 changes: 43 additions & 15 deletions docs/config/server-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -146,30 +146,58 @@ Consulta [el documento de WSL](https://learn.microsoft.com/en-us/windows/wsl/net

- **Tipo:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`

Deshabilita o configura la conexión HMR (en los casos en que el websocket HMR deba usar una dirección diferente del servidor http).
Deshabilita o configura la conexión HMR (en los casos en que el websocket HMR deba usar una dirección diferente del servidor http).

Coloca `server.hmr.overlay` en `false` para deshabilitar la superposición de errores del servidor.
Coloca `server.hmr.overlay` en `false` para deshabilitar la superposición de errores del servidor.

`clientPort` es una opción avanzada que sobreescribe el puerto solo en el lado del cliente, lo que le permite servir el websocket en un puerto diferente al que busca el código del cliente.
`clientPort` es una opción avanzada que sobreescribe el puerto solo en el lado del cliente, lo que le permite servir el websocket en un puerto diferente al que busca el código del cliente.

Cuando se define `server.hmr.server`, Vite procesará las solicitudes de conexión HMR a través del servidor provisto. Si no está en modo middleware, Vite intentará procesar las solicitudes de conexión HMR a través del servidor existente. Esto puede ser útil cuando se usan certificados autofirmados o cuando desea exponer a Vite a través de una red en un solo puerto.
Cuando se define `server.hmr.server`, Vite procesará las solicitudes de conexión HMR a través del servidor provisto. Si no está en modo middleware, Vite intentará procesar las solicitudes de conexión HMR a través del servidor existente. Esto puede ser útil cuando se usan certificados autofirmados o cuando desea exponer a Vite a través de una red en un solo puerto.

Consulta [`vite-setup-catalogue`](https://github.com/sapphi-red/vite-setup-catalogue) para ver algunos ejemplos.
Consulta [`vite-setup-catalogue`](https://github.com/sapphi-red/vite-setup-catalogue) para ver algunos ejemplos.

:::tip NOTA
:::tip NOTA

Con la configuración predeterminada, se espera que los proxies inversos frente a Vite admitan WebSocket de proxy. Si el cliente de Vite HMR no logra conectar WebSocket, el cliente recurrirá a conectar WebSocket directamente al servidor de Vite HMR sin pasar por los proxies inversos:
Con la configuración predeterminada, se espera que los proxies inversos frente a Vite admitan WebSocket de proxy. Si el cliente de Vite HMR no logra conectar WebSocket, el cliente recurrirá a conectar WebSocket directamente al servidor de Vite HMR sin pasar por los proxies inversos:

```
Direct websocket connection fallback. Check out https://vitejs.dev/config/server-options.html#server-hmr to remove the previous connection error.
```
```
Direct websocket connection fallback. Check out https://vitejs.dev/config/server-options.html#server-hmr to remove the previous connection error.
```

Se puede ignorar el error que aparece en el navegador cuando ocurre el fallback. Para evitar el error al omitir directamente los proxies inversos, podrías:

- configurar el proxy inverso para el proxy de WebSocket también
- configurar [`server.strictPort = true`](#server-strictport) y configurar `server.hmr.clientPort` con el mismo valor que `server.port`
- configurar `server.hmr.port` en un valor diferente de [`server.port`](#server-port)
:::

## servidor.warmup

- **Tipo:** `{ clientFiles?: string[], ssrFiles?: string[] }`

Se puede ignorar el error que aparece en el navegador cuando ocurre el fallback. Para evitar el error al omitir directamente los proxies inversos, podrías:
Prepara archivos para transformarlos y almacenar en caché los resultados por adelantado. Esto mejora la carga de la página inicial durante el inicio del servidor y evita transformaciones en cascada.

- configurar el proxy inverso para el proxy de WebSocket también
- configurar [`server.strictPort = true`](#server-strictport) y configurar `server.hmr.clientPort` con el mismo valor que `server.port`
- configurar `server.hmr.port` en un valor diferente de [`server.port`](#server-port)
:::
Las opciones `clientFiles` y `ssrFiles` aceptan una serie de rutas de archivos o patrones globales relativos a `root`. Asegúrate de agregar solo los archivos que tengan código preparado; de lo contrario, agregar demasiados puede ralentizar el proceso de transformación.

Para entender por qué la preparación puede ser útil, aquí hay un ejemplo. Dado este gráfico de módulo donde el archivo de la izquierda importa el archivo de la derecha:

```
main.js -> Component.vue -> big-file.js -> big-data.json
```

Los ids importados solo se pueden conocer después de que se transforma el archivo, por lo que si `Component.vue` tarda algún tiempo en transformarse, `big-file.js` tiene que esperar su turno, y así sucesivamente. Esto provoca una cascada interna.

Al preparar `big-file.js`, o cualquier archivo que sepas es una ruta activa en tu aplicación, se almacenarán en caché y se podrán servir de inmediato.

```js
export defineConfig default ({
server: {
warmup: {
clientFiles: ['./src/big-file.js', './src/components/*.vue'],
},
},
})
```
## server.watch
Expand Down
4 changes: 3 additions & 1 deletion docs/config/worker-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ Opciones relacionadas con Web Workers.

## worker.plugins

- **Tipo:** [`(Plugin | Plugin[])[]`](#plugins)
- **Tipo:** [`() => (Plugin | Plugin[])[]`](./shared-options#plugins)

Complementos de Vite que se aplican al paquete de worker. Ten en cuenta que [config.plugins](./shared-options#plugins) sólo aplica a los workers en desarrollo, debe configurarse aquí para compilación en su lugar.

La función debería devolver nuevas instancias de complementos a medida que se utilizan en compilaciones paralelas de un worker de Rollup. Como tal, se ignorará la modificación de las opciones de `config.worker` en el hook `config`.

## worker.rollupOptions

- **Tipo:** [`RollupOptions`](https://rollupjs.org/configuration-options/)
Expand Down
10 changes: 10 additions & 0 deletions docs/guide/api-hmr.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ interface ViteHotContext {
event: T,
cb: (payload: InferCustomEventPayload<T>) => void,
): void
off<T extends string>(
event: T,
cb: (payload: InferCustomEventPayload<T>) => void,
): void
send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void
}
```
Expand Down Expand Up @@ -160,6 +164,10 @@ import.meta.hot.accept((module) => {
})
```
## `hot.off(event, cb)`
Elimina el callback de los listeners de eventos.
## `hot.on(event, cb)`
Escucha un evento HMR.
Expand All @@ -180,5 +188,7 @@ Los eventos HMR personalizados también se pueden enviar desde complementos. Dal
## `hot.send(event, data)`
Envía eventos personalizados al servidor de desarrollo de Vite.
Si se llama antes de conectarse, los datos se almacenarán en búfer y se enviarán una vez que se establezca la conexión.
Consulta [Comunicación cliente-servidor](/guide/api-plugin.html#comunicacion-cliente-servidor) para obtener más detalles.
2 changes: 1 addition & 1 deletion docs/guide/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ El empaquetado de producción asume soporte para código JavaScript moderno. De

Puedes especificar objetivos personalizados a través de la [opción de configuración `build.target`](/config/build-options#build-target), donde el objetivo más bajo es `es2015`.

Ten en cuenta que, de forma predeterminada, Vite solo maneja las transformaciones de sintaxis y **no cubre los polyfills**. Puedes consultar [Polyfill.io](https://polyfill.io/v3/), que es un servicio que genera automáticamente paquetes de polyfill en función de la cadena UserAgent del navegador del usuario.
Ten en cuenta que, de forma predeterminada, Vite solo maneja las transformaciones de sintaxis y **no cubre los polyfills**. Puedes consultar [Polyfill.io](https://polyfill.io/), que es un servicio que genera automáticamente paquetes de polyfill en función de la cadena UserAgent del navegador del usuario.

Los navegadores obsoletos pueden ser soportados a través de [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy), que generará automáticamente fragmentos y las correspondientes polyfills con características en lenguaje ES. Los fragmentos se cargan condicionalmente solo en navegadores que no tienen soporte ESM nativo.

Expand Down
2 changes: 0 additions & 2 deletions docs/guide/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ vite [root]
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--host [host]` | Especifica un nombre de host (`string`) |
| `--port <port>` | Especifica puerto (`number`) |
| `--https` | Usa TLS + HTTP/2 (`boolean`) |
| `--open [path]` | Abre el navegador al iniciar (`boolean \| string`) |
| `--cors` | Habilita CORS (`boolean`) |
| `--strictPort` | Finaliza si el puerto configurado ya está en uso (`boolean`) |
Expand Down Expand Up @@ -115,7 +114,6 @@ vite preview [root]
| `--host [host]` | Especifica un nombre de host (`string`) |
| `--port <port>` | Especifica puerto (`number`) |
| `--strictPort` | Finaliza si el puerto configurado ya está en uso (`boolean`) |
| `--https` | Usa TLS + HTTP/2 (`boolean`) |
| `--open [path]` | Abre el navegador al iniciar (`boolean \| string`) |
| `--outDir <dir>` | Directorio de salida (por defecto: `dist`)(`string`) |
| `-c, --config <file>` | Usa el archivo de configuración especificado (`string`) |
Expand Down
4 changes: 0 additions & 4 deletions docs/guide/dep-pre-bundling.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,6 @@ export default defineConfig({

Al realizar cambios en la dependencia vinculada, reinicia el servidor de desarrollo con la opción de línea de comando `--force` para que los cambios surtan efecto.

::: warning Deduplicación
Debido a las diferencias en la resolución de dependencias vinculadas, las dependencias transitivas pueden deduplicarse incorrectamente, lo que genera problemas cuando se usa en tiempo de ejecución. Si te topas con este problema, usa `npm pack` en la dependencia vinculada para solucionarlo.
:::

## Personalizando el Comportamiento

La heurística de descubrimiento de dependencia predeterminada puede no ser siempre deseable. En los casos en los que desees incluir/excluir dependencias explícitamente de la lista, utiliza las [opciones de configuración de `optimizeDeps`](/config/dep-optimization-options).
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Los ajustes preestablecidos de plantilla admitidos son:
| [solid](https://vite.new/solid) | [solid-ts](https://vite.new/solid-ts) |
| [qwik](https://vite.new/qwik) | [qwik-ts](https://vite.new/qwik-ts) |

## Monta tu primer proyecto Vite
## Inicia tu primer proyecto Vite

::: tip Nota de compatibilidad
Vite requiere [Node.js](https://nodejs.org/en/) version 18+. 20+. Sin embargo, algunas plantillas requieren una versión superior de Node.js para funcionar, por favor actualiza si tu gestor de paquetes te advierte sobre ello.
Expand Down Expand Up @@ -134,7 +134,7 @@ En un proyecto donde está instalado Vite, puedes usar el binario `vite` en tus
}
```

Puedes especificar opciones CLI adicionales como `--port` o `--https`. Para obtener una lista completa de las opciones de la CLI, ejecuta `npx vite --help` en tu proyecto.
Puedes especificar opciones CLI adicionales como `--port` o `--open`. Para obtener una lista completa de las opciones de la CLI, ejecuta `npx vite --help` en tu proyecto.

Aprende más sobre la [interfaz de línea de comnando](./cli.md)

Expand Down
Loading

0 comments on commit 8ed8dcd

Please sign in to comment.