- Fix missing accents on words like "Compilación", "artículos", "extraído", and "implícitamente".
- Improve translation naturalness by changing phrases like "apenas en el tiempo" to "solo en el tiempo" and "actualizaciones rápidas" to "actualizaciones en caliente".
- Correct terminology mistakes, such as translating "timestamps" to "marca de tiempo" instead of "sellos se datos".
- Update code block comments to use proper Spanish interrogative punctuation (adding "¡" and "¿").
description: Carga datos arbitrarios en tiempo de compilación usando cargadores de datos de VitePress e impórtalos desde páginas o componentes.
description: Carga datos arbitrarios en tiempo de compilación usando cargadores de datos de VitePress e impórtalo desde páginas o componentes.
---
# Carga de Datos en Tiempo de Compilacion {#build-time-data-loading}
# Carga de Datos en Tiempo de Compilación {#build-time-data-loading}
VitePress proporciona un recurso llamado **cargadores de dato** que permite cargar datos arbitrarios e importarlos desde páginas o componentes. La carga de datos es ejecutada **apenas en el tiempo del build** los datos resultantes serán serializados como JSON en el paquete de JavaScript final.
VitePress proporciona un recurso llamado **cargadores de datos** que permite cargar datos arbitrarios e importarlos desde páginas o componentes. La carga de datos es ejecutada **solo en el tiempo del build** los datos resultantes serán serializados como JSON en el paquete de JavaScript final.
Los cargadores de datos pueden ser usados para buscar datos remotos o generar metadatos con base en archivos locales. Por ejemplo, puede usar cargadores de datos para procesar todas sus pagínas API locales y generar automáticamente un indice de todas las entradas del API.
Los cargadores de datos pueden ser usados para obtener datos remotos o generar metadatos a partir de archivos locales. Por ejemplo, puede usar cargadores de datos para analizar todas sus páginas de API locales y generar automáticamente un índice de todas las entradas de la API.
## Uso Básico {#basic-usage}
Un archivo de cargados de datos debe terminar con `.data.js` o `.data.ts`. El archivo debe proporcionar una exportación por defecto de un objeto con el método `load()`:
Un archivo de carga de datos debe terminar con `.data.js` o `.data.ts`. El archivo debe proporcionar una exportación predeterminada de un objeto con el método `load()`:
```js [example.data.js]
export default {
@ -22,8 +22,9 @@ export default {
}
```
El módulo del cargador es validado apenas en Node.js, entonces puede importar APIs Node y dependencias npm caso necesario.
Puede importar entonces datos de este archivo en páginas `.md` y componentes `.vue` usando la exportación llamada `data`:
El módulo de carga se evalúa únicamente en Node.js, por lo que puedes importar las API de Node y las dependencias de npm según sea necesario.
Luego puedes importar datos de este archivo en páginas `.md` y componentes `.vue` usando la exportación llamada `data`:
```vue
<scriptsetup>
@ -41,9 +42,9 @@ Salida:
}
```
Notará que el propio cargados de datos no exporta `data`. Es VitePress llamando el método `load()` entre bastidores y exponiendo implicitamente el resultado por medio de la exportación llamada `data`.
Notará que el cargador de datos en sí no exporta el `data`. Es VitePress llamando el método `load()` internamente y expone implícitamente el resultado a través de la exportación llamada `data`.
Esto funciona incluso si el cargador fuera asíncrono:
Esto funciona incluso si el cargador es asíncrono:
```js
export default {
@ -56,11 +57,11 @@ export default {
## Datos de Archivos Locales {#data-from-local-files}
Cuando necesita generar datos con base en archivos locales, debe usar la opción `watch` en el cargador de datos para que los cambios hechos en esos archivos puedan accionar actualizaciones rápidas.
Cuando necesita generar datos con base en archivos locales, debe usar la opción `watch` en el cargador de datos para que los cambios hechos en esos archivos puedan accionar actualizaciones en caliente.
La opción `watch` tabién es conveniente porque puede usar [patrones glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) para corresponder a vários archivos. Los patrones pueden ser relativos al propio archivo del cargador, y la función `load()` recibirá los archivos correspondientes como paths absolutos.
La opción `watch` también es conveniente porque puede usar [patrones glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) para corresponder a varios archivos. Los patrones pueden ser relativos al propio archivo del cargador, y la función `load()` recibirá los archivos correspondientes como paths absolutos.
El siguiente ejemplo muestra el cargamento de archivos CSV y la transformación de estos en JSON usando [csv-parse](https://github.com/adaltas/node-csv/tree/master/packages/csv-parse/). Como este archivo solo es ejecutado en el tiempo del build, usted no enviará el procesador de CSV para el cliente!
El siguiente ejemplo muestra el cargamento de archivos CSV y la transformación de estos en JSON usando [csv-parse](https://github.com/adaltas/node-csv/tree/master/packages/csv-parse/). Como este archivo solo es ejecutado en el tiempo del compilación, usted no enviará el procesador de CSV para el cliente!
```js
import fs from 'node:fs'
@ -69,9 +70,9 @@ import { parse } from 'csv-parse/sync'
export default {
watch: ['./data/*.csv'],
load(watchedFiles) {
// watchedFiles será un array de paths absolutos de los archivos um array de caminhos absolutos dos arquivos correspondientes.
// generar un array de metadatos de post que puede ser usado para mostrar
// una lista en el layout del tema
// watchedFiles será un array con las rutas absolutas de los archivos coincidentes.
// Genera un array con los metadatos de las entradas del blog que se pueden usar para renderizar
// una lista en el diseño del tema.
return watchedFiles.map((file) => {
return parse(fs.readFileSync(file, 'utf-8'), {
columns: true,
@ -84,7 +85,7 @@ export default {
## `createContentLoader`
Al construir un sitio enfocado en contenido, frecuentemente necesitamos crear una página de "archivo" o "índice": una página donde listamos todas las entradas disponibles en nuestra colección de contenido, por ejemplo, articulos de blog o páginas de API. Nosotros **podemos** implementar esto directamente con el API de cargador de datos, pero como este es un caso de uso tan común, VitePress también proporciona un auxiliar `createContentLoader` para simplificar esto:
Al construir un sitio enfocado en contenido, frecuentemente necesitamos crear una página de "archivo" o "índice": una página donde listamos todas las entradas disponibles en nuestra colección de contenido, por ejemplo, artículos de blog o páginas de API. Nosotros **podemos** implementar esto directamente con el API de cargador de datos, pero como este es un caso de uso tan común, VitePress también proporciona un auxiliar `createContentLoader` para simplificar esto:
```js [posts.data.js]
import { createContentLoader } from 'vitepress'
@ -92,15 +93,15 @@ import { createContentLoader } from 'vitepress'
El auxiliar acepta un patrón glob relativo al [diretório fuente](./routing#source-directory) y retorna un objeto de cargador de datos `{ watch, load }` que puede ser usado como exportación por defecto en un archivo de cargador de datos. El también implementa cache con base en los sellos se datos del archivo para mejorar el desempeño en el desarrollo.
El auxiliar acepta un patrón glob relativo al [directorio fuente](./routing#source-directory) y retorna un objeto de cargador de datos `{ watch, load }` que puede ser usado como exportación por defecto en un archivo de cargador de datos. El también implementa cache con base en las marca de tiempo se datos del archivo para mejorar el desempeño en el desarrollo.
Note que el cargador solo funciona con archivos Markdown - archivos no Markdown encontrados serán ignorados.
Los datos cargados serán un _array_ con el tipo `ContentData[]`:
Los datos cargados serán un array con el tipo `ContentData[]`:
```ts
interface ContentData {
// URL mapeada para la página. Ex: /posts/hello.html (no incluye la base)
// URL mapeada para la página. p. ej.: /posts/hola.html (no incluye la base)
// itere manualmente o use `transform` personalizado para normalizar los paths
url: string
// datos frontmatter de la página
@ -114,8 +115,7 @@ interface ContentData {
}
```
Por defecto, apenas `url` y `frontmatter` son proporcionados. Esto ocurre porque los datos cargados serán incorporados como JSON en el paquete del cliente, entonces necesitamos ser cautelosos con su tamaño. Aqui está un ejemplo de cómo usar los datos para construir una página de índice de blog mínima:
Por defecto, solo se proporcionan `url` y `frontmatter`. Esto se debe a que los datos cargados se insertarán como JSON en el paquete del cliente, por lo que debemos tener cuidado con su tamaño. Aquí hay un ejemplo que utiliza los datos para crear una página de índice de blog mínima:
```vue
<scriptsetup>
import { data as posts } from './posts.data.js'
@ -140,9 +140,9 @@ Los datos por defecto pueden no atender todas las necesidades - puede optar por
jackestar
4 weeks ago