Technical Documentation: justjavac/wechat-miniapp-radar

ℹ️ Provenance: Hybrid Fusion: justjavac/wechat-miniapp-radar + justjavac/docs · CodeWiki Reference · Recency: Active (< 180 days)

1. Project Overview & Quickstart (justjavac/wechat-miniapp-radar) Copy Chapter

小程序雷达

AI 驱动的小程序生态选型与风险评估工具，把微信小程序开发资源转化为可筛选、可评估、可对比的技术雷达。

线上地址 Copy Chapter

• 主站：https://miniapp.jjc.fun
• Vercel：https://wechat-miniapp-radar.vercel.app

适合谁 Copy Chapter

• 正在做微信小程序技术选型的产品、研发和架构团队。
• 需要判断 Taro、uni-app、原生小程序、组件库、云开发和 SDK 风险的团队。
• 需要把历史 awesome 列表转成可筛选、可对比、可验证技术雷达的维护者。

可以做什么 Copy Chapter

• Radar：按推荐状态、风险等级、资源类型、分类和适用场景浏览小程序生态资源。
• Quick Search：快速搜索资源并跳转常用页面。
• Compare：对比 Taro、uni-app、原生小程序等核心方案。
• Advisor：输入选型问题，获得推荐结论、适用/不适用条件、迁移成本、下一步和证据来源。
• Doctor：粘贴小程序项目配置，识别框架依赖、过时方案和迁移风险。
• Weekly：查看小程序生态周报和近期风险信号。

数据概览 Copy Chapter

当前数据集中包含 237 个小程序生态资源。完整资源可在 Radar 页面和导出能力中查看。

核心样例 Copy Chapter

• Taro ★30.6k+ - 使用 React 的方式开发小程序的框架，同时支持生成多端应用
• uni-app ★36.1k+ - 使用 Vue 语法开发小程序、H5、App的统一框架
• MPX ★2.1k+ - 增强型小程序框架，深度性能优化，支持跨小程序平台开发，完全兼容原生小程序组件
• WePY ★21.7k+ - 支持组件化的小程序开发框架
• vant-weapp ★12.3k+ - 高颜值、好用、易扩展的微信小程序 UI 库
• tdesign-miniprogram ★1.3k+ - TDesign 适配微信小程序的组件库
• CloudBase Framework ★1.1k - 腾讯云开发开源一键部署工具，支持部署小程序及云开发应用
• 小程序开发教程 - 微信小程序官方开发教程与基础框架说明

使用入口 Copy Chapter

• Radar 页面：/radar
• Compare 页面：/compare
• Advisor 页面：/advisor
• Doctor 页面：/doctor
• Weekly 页面：/weekly

QQ交流群 Copy Chapter

• 微信小程序1号群：593495800 （已满）
• 微信小程序2号群：578063690
• 微信小程序3号群：682463867

2. Official Technical Reference & Guides (justjavac/docs) Copy Chapter

File: old-translations/zh-CN/guides/debugging.md Copy Chapter

layout: ~/layouts/MainLayout.astro title: 调试 Copy Chapter

Astro 提供了几个不同的工具来帮助你更容易和更快地调试代码。

使用 `console.log()` 调试 Copy Chapter

console.log() 是一种简单却十分受欢迎的调试 Astro 代码方式。你在哪里写下的 console.log 语句将决定你的调试输出在哪里。

Frontmatter Copy Section

在 Astro frontmatter 中的 console.log() 语句将输出到运行 Astro CLI 的终端中。这是因为 Astro 运行在服务器上，而不是运行在浏览器上。

---
const sum = (a, b) => a + b;

// 示例：在 CLI 终端中输出 "4"
console.log(sum(2, 2));
---

JS Script Copy Section

在 Astro <script> 标签内编写或导入的代码会在直接浏览器运行。console.log() 语句或其他调试输出都将打印到浏览器的控制台中。

调试框架组件 Copy Chapter

框架组件（如 React 和 Svelte）是特别的。它们默认在服务器端渲染，这意味着 console.log() 调试输出将在终端可见。然而，它们也可以在浏览器上进行激活，这可能导致你的调试日志同时也出现在浏览器上。

这对于调试 SSR 输出和浏览器中激活组件间的差异很有用。

Astro `` 组件 Copy Chapter

为了帮助你调试 Astro 组件，Astro 提供了内置的 <Debug /> 组件，任何值都可以直接将渲染传递到组件的 HTML 模板中。这对于在浏览器中进行快速调试非常有用的，使得开发者不必在终端和浏览器之间来回翻转。

---
import { Debug } from 'astro/components';
const sum = (a, b) => a + b;
---

<!-- 示例：在浏览器中输出 {answer: 6} -->
<Debug answer={sum(2, 4)} />

调试组件支持多种语法选项，使调试更加灵活和简明。

---
import { Debug } from 'astro/components';
const sum = (a, b) => a + b;
const answer = sum(2, 4);
---
<!-- 示例：三个示例是等效的 -->
<Debug answer={sum(2, 4)} />
<Debug {{answer: sum(2, 4)}} />
<Debug {answer} />

File: old-translations/pt-br/guides/layer-zero.md Copy Chapter

title: Faça Deploy do seu Site Astro na Layer0 layout: ~/layouts/DeployGuideLayout.astro i18nReady: true Copy Chapter

Você pode fazer o deploy do seu projeto Astro na Layer0, uma plataforma edge e de distribuição de conteúdo (em Inglês, "content delivery network" ou CDN) para fazer deploy, proteger e acelerar websites e APIs.

:::tip
Confira o guia para Astro na documentação da Layer0!
:::

Como fazer o Deploy Copy Chapter

1. Adicione Layer0

   bash Copy

   # Primeiro, instale globalmente a CLI da Layer0:
   $ npm i -g @layer0/cli
   
   # Depois, adicione Layer0 ao seu site Astro:
   $ 0 init

2. Atualize seu Layer0 Router

   Cole o seguinte código em routes.ts:

   js Copy

   // routes.ts
   import { Router } from '@layer0/core';
   
   export default new Router()
     .get(
       '/:path*/:file.:ext(js|css|png|ico|jpg|gif|svg)',
       ({ cache, serveStatic }) => {
         cache({
           browser: {
             // faz cache do js, css e imagens no navegador por uma hora...
             maxAgeSeconds: 60 * 60,
           },
           edge: {
             // ... E na edge por um ano
             maxAgeSeconds: 60 * 60 * 24 * 365,
           },
         });
         serveStatic('dist/:path*/:file.:ext');
       }
     )
     .match('/:path*', ({ cache, serveStatic, setResponseHeader }) => {
       cache({
         // impede que o navegador faça cache do html...
         browser: false,
         edge: {
           // ...faz cache do html na edge por um ano
           maxAgeSeconds: 60 * 60 * 24 * 365,
         },
       });
       setResponseHeader('content-type', 'text/html; charset=UTF-8');
       serveStatic('dist/:path*');
     });

   Você pode remover o backend de origem de layer0.config.js:

   js Copy

   module.exports = {};

3. Faça o deploy para a Layer0

   Para fazer o deploy do seu site na Layer0, execute:

   bash Copy

   # Cria um build em produção do seu site astro
   $ npm run build
   
   # Faz o deploy do site na Layer0
   $ 0 deploy

File: old-translations/es/guides/aliases.md Copy Chapter

layout: ~/layouts/MainLayout.astro title: Alias Copy Chapter

Un alias es un atajo útil para tus importaciones de JavaScript. Esta puede ser una gran opción si no te gustan las rutas de importación relativas largas con muchos segmentos repetidos ../. Define un alias para importar cosas directamente desde algún directorio de proyecto de nivel superior, sin importar qué tan profundamente anidado esté ubicado un archivo.

Con un alias, puedes importar desde "$components/SomeComponent.astro" en lugar de " ../../../../../components/SomeComponent.astro ".

Agregar un alias personalizado Copy Chapter

Para agregar un alias personalizado a tu proyecto, busca el archivo snowpack.config.mjs de tu proyecto. Este archivo de configuración contiene las instrucciones y la configuración de la herramienta de compilación interna de Astro Snowpack. Si no ves un archivo snowpack.config.mjs en el nivel superior de su proyecto (dentro de la misma carpeta que tu package.json), puedes crear un archivo en blanco ahora.

Para agregar un nuevo alias de importación, define una nueva entrada alias:

// snowpack.config.mjs
export default {
  alias: {
    // Asignar importaciones de "$components/*" a "src/components/*"
    $components: './src/components',
    // Asignar importaciones de "$/*" a "src/*"
    $: './src',
    // ¡Defina el tuyo!
    '$my-special-alias': './src/some/special/folder',
  },
  // ...
};

Una vez que hayas definido tu(s) alia(s) y hayas reiniciado Astro (si es necesario), puedes comenzar a importar desde el alias en cualquier lugar de tu proyecto:

import MyComponent from '$components/MyComponent.astro';
import mySvgUrl from '$/logo.svg';

Puede leer más sobre la configuración de alias en la documentación de Snowpack.

Consejos y trucos Copy Chapter

• Recomendamos comenzar todos los alias con el carácter especial $. No es necesario.
• Es común definir un alias $ de nivel superior para tu directorio src. No es necesario.
• Para agregar soporte VSCode para tus alias, también necesitarás definir tus alias en un archivo tsconfig.json o jsconfig.json a través del valor de configuración "paths". Esto habilitará Intellisense en VSCode y la mayoría de los demás editores de texto.
• ¡No necesitas usar un alias con Astro! Algunas personas prefieren menos magia en su código y no quieren molestarse con pasos adicionales para la compatibilidad con el editor de texto.

File: old-translations/es/guides/data-fetching.md Copy Chapter

layout: ~/layouts/MainLayout.astro title: Obtención de datos Copy Chapter

Los componentes y las páginas de Astro pueden obtener datos remotos para ayudar a generar tus páginas. Astro proporciona dos herramientas diferentes a las páginas para ayudarte a hacer esto: fetch() y await de nivel superior.

`fetch()` Copy Chapter

Las páginas de Astro tienen acceso a la función global fetch() en su script de configuración. fetch() es una API de JavaScript nativa (MDN - fetch) que te permite realizar solicitudes HTTP para cosas como API y recursos.

Aunque los scripts de componentes de Astro se ejecutan dentro de Node.js (y no en el navegador), Astro proporciona esta API nativa para que pueda obtener datos en el momento de la creación de la página.

---
// Movies.astro
const response = await fetch('https://example.com/movies.json');
const data = await response.json();
// Recuerda: las secuencias de comandos del componente de Astro se registran en la CLI
console.log(data);
---
<!-- Envía el resultado a la página -->
<div>{JSON.stringify(data)}</div>

await de nivel superior Copy Chapter

await es otra característica nativa de JavaScript que te permite esperar la respuesta de alguna promesa asincrónica (MDN - await). Astro admite "await" en el nivel superior de la secuencia de comandos de tu componente.

Importante: Estos aún no están disponibles dentro de los componentes de Astro que no son de página. En su lugar, carga todos tus datos dentro de tus páginas y luego pásalos a tus componentes como propiedades.

Usando `fetch()` fuera de Componentes de Astro Copy Chapter

Si quieres usar fetch() en un componente que no sea Astro, usa la biblioteca node-fetch:

// Movies.tsx
import fetch from 'node-fetch';
import type { FunctionalComponent } from 'preact';
import { h } from 'preact';

const data = fetch('https://example.com/movies.json').then((response) =>
  response.json()
);

// Los componentes que se procesan en tiempo de compilación también se registran en la CLI.
// Si cargaste este componente con una directiva, se registraría en la consola del navegador.
console.log(data);

const Movies: FunctionalComponent = () => {
  // Envía el resultado a la página
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;

Si cargas un componente usando node-fetch interactivamente, con client:load, client:visible, etc., necesitarás no usar node-fetch o cambiar a una librería isomórfica que se ejecutará tanto en el momento de la compilación como en el cliente, como node-fetch README.md recomienda:

En lugar de implementar XMLHttpRequest en Node.js para ejecutar [Fetch polyfill] específico del navegador (https://github.com/github/fetch), ¿por qué no pasar de http nativo a buscar API directamente? Por lo tanto, node-fetch, código mínimo para una API compatible con window.fetch en tiempo de ejecución de Node.js.

Consulta isomorphic-unfetch de Jason Miller o [cross-fetch] de Leonardo Quixada (https://github.com/lquixada/cross-fetch) para uso isomórfico (exporta node-fetch para el lado del servidor, whatwg-fetch para el lado del cliente).

Citado de https://github.com/node-fetch/node-fetch#motivation

File: old-translations/es/guides/debugging.md Copy Chapter

layout: ~/layouts/MainLayout.astro title: Depuración Copy Chapter

Astro se ejecuta en el servidor y se registra directamente en su terminal, por lo que puede ser difícil depurar valores de Astro. El componente <Debug> incorporado de Astro puede ayudarte a inspeccionar los valores dentro de tus archivos en el lado del cliente. Lee más sobre el componente de depuración incorporado.

File: old-translations/es/guides/deploy.md Copy Chapter

layout: ~/layouts/MainLayout.astro title: Desplegar en la web Copy Chapter

Las siguientes guías se basan en algunos supuestos compartidos:

• Estás utilizando la ubicación de salida de compilación predeterminada (dist/). Esta ubicación se puede cambiar usando la opción de configuración dist.
• Estás usando npm. Puedes usar comandos equivalentes para ejecutar los scripts si estás usando Yarn u otros administradores de paquetes.
• Astro está instalado como una dependencia de desarrollo local en su proyecto, y has configurado los siguientes scripts npm:

{
  "scripts": {
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

Construyendo la aplicación Copy Chapter

Puedes ejecutar el comando npm run build para compilar la aplicación.

$ npm run build

Por defecto, la salida de la compilación se colocará en dist/. Puedes desplegar esta carpeta dist/ en cualquiera de tus plataformas preferidas.

Páginas de GitHub Copy Chapter

Advertencia: De forma predeterminada, las páginas de Github romperán el directorio _astro/ de su sitio web desplegado. Para deshabilitar este comportamiento y solucionar este problema, asegúrate de usar el script deploy.sh de abajo o agrega manualmente un archivo .nojekyll vacío a tu directorio public/.

1. Establece el .site correcto en astro.config.mjs.

2. Dentro de tu proyecto, crea deploy.sh con el siguiente contenido (sin comentar las líneas apropiadas) y ejecútalo para implementar:

   bash Copy

   #!/usr/bin/env sh
   
   # abortar en errores
   set -e
   
   # construir
   npm run build
   
   # navegar hasta el directorio de salida de la compilación
   cd dist
   
   # añade .nojekyll para omitir el comportamiento predeterminado de las páginas de GitHub
   touch .nojekyll
   
   # si estás implementando en un dominio personalizado
   # echo 'www.example.com' > CNAME
   
   git init
   git add -A
   git commit -m 'deploy'
   
   # si estás desplegando en https://<USERNAME>.github.io
   # git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git main
   
   # si estás desplegando en https://<USERNAME>.github.io/<REPO>
   # git push -f [email protected]:<USERNAME>/<REPO>.git main:gh-pages
   
   cd -

   También puedes ejecutar el script anterior en tu configuración de CI para habilitar la implementación automática en cada envío.

GitHub Actions Copy Section

1. En el repositorio del proyecto astro, crea la rama gh-pages, luego ve a Configuración > Páginas y establece la rama gh-pages para las Páginas de GitHub y establece el directorio en / (raíz).
2. Establezca el .site correcto en astro.config.mjs.
3. Crea el archivo .github/workflows/main.yml y agrega el yaml de abajo. Asegúrate de editar con tus propios datos.
4. En GitHub, ve a Configuración > Configuración de desarrollador > Tokens de acceso personal. Genere un nuevo token con permisos de repositorio.
5. En el repositorio del proyecto Astro (no <SU NOMBRE DE USUARIO>.github.io) ve a Configuración > Secretos y agregue tu nuevo token de acceso personal con el nombre API_TOKEN_GITHUB.
6. Cuando envíes cambios al repositorio del proyecto Astro, CI los desplegará en <SU NOMBRE DE USUARIO >.github.io por ti.

# Flujo de trabajo para compilar y desplegar en tus páginas de GitHub del repositorio.

# Edita los detalles de tu proyecto aquí.
# ¡Recuerda agregar API_TOKEN_GITHUB en Configuración del repositorio > Secretos también!
env:
  githubEmail: <YOUR GITHUB EMAIL ADDRESS>
  deployToRepo: <NAME OF REPO TO DEPLOY TO (E.G. <YOUR USERNAME>.github.io)>

name: Github Pages Astro CI

on:
  # Activa el flujo de trabajo en eventos de push y pull requests, pero solo para la rama principal
  push:
    branches: [main]
  pull_request:
    branches: [main]

  # Permite ejecutar este flujo de trabajo manualmente desde la pestaña Acciones.
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # Registra tu repositorio en $GITHUB_WORKSPACE, para que tu trabajo pueda acceder a él.
      - uses: actions/checkout@v2

      # Instalar dependencias con npm
      - name: Install dependencies
        run: npm ci

      # Construye el proyecto y agrega el archivo .nojekyll para suprimir el comportamiento predeterminado
      - name: Build
        run: |
          npm run build
          touch ./dist/.nojekyll

      # Hace push a tu repositorio de páginas
      - name: Push to pages repo
        uses: cpina/github-action-push-to-another-repository@main
        env:
          API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }}
        with:
          source-directory: 'dist'
          destination-github-username: ${{ github.actor }}
          destination-repository-name: ${{ env.deployToRepo }}
          user-email: ${{ env.githubEmail }}
          commit-message: Deploy ORIGIN_COMMIT
          target-branch: gh-pages

Travis CI Copy Section

1. Set the correct .site in astro.config.mjs.

2. Create a file named .travis.yml in the root of your project.

3. Run npm install locally and commit the generated lockfile (package-lock.json).

4. Use the GitHub Pages deploy provider template, and follow the Travis CI documentation.

   yaml Copy

   language: node_js
   node_js:
     - lts/*
   install:
     - npm ci
   script:
     - npm run build
   deploy:
     provider: pages
     skip_cleanup: true
     local_dir: dist
     # A token generated on GitHub allowing Travis to push code on you repository.
     # Set in the Travis settings page of your repository, as a secure variable.
     github_token: $GITHUB_TOKEN
     keep_history: true
     on:
       branch: master

GitLab Pages Copy Chapter

1. Establece el .site correcto en astro.config.mjs.

2. Establece dist en astro.config.mjs a public y public en astro.config.mjs a una carpeta recién nombrada que contiene todo lo que se encuentra actualmente en public. El razonamiento es porque public es una segunda carpeta de origen en astro, por lo que si desea generar la salida a public, deberá extraer los activos públicos de una carpeta diferente.

3. Crea un archivo llamado .gitlab-ci.yml en la raíz de su proyecto con el contenido de abajo. Esto creará y desplegará su sitio cada vez que realice cambios en su contenido:

   yaml Copy

   image: node:10.22.0
   pages:
     cache:
       paths:
         - node_modules/
     script:
       - npm install
       - npm run build
     artifacts:
       paths:
         - public
     only:
       - master

Netlify Copy Chapter

Nota: Si está utilizando una imagen de compilación antigua en Netlify, asegúrate de configurar tu versión de Node.js en un archivo .nvmrc (ejemplo: node v14.17.6) o una variable de entorno NODE_VERSION. Este paso ya no es necesario de forma predeterminada.

Puedes configurar tu implementación de dos maneras, a través del sitio web de Netlify o con un archivo de proyecto local netlify.toml.

`netlify.toml` file Copy Section

Crea un nuevo archivo netlify.toml en el nivel superior del repositorio de su proyecto con la siguiente configuración:

[build]
  command = "npm run build"
  publish = "dist"

Empuja el nuevo archivo netlify.toml a tu repositorio de git alojado. Luego, configura un nuevo proyecto en Netlify para tu repositorio de git. Netlify leerá este archivo y configurará automáticamente su implementación.

Interfaz de usuario del sitio web de Netlify Copy Section

Puedes omitir el archivo netlify.toml e ir directamente a Netlify para configurar tu proyecto. Netlify ahora debería detectar los proyectos de Astro automáticamente y pre-rellenar la configuración por ti. Asegúrate de introducir la siguiente configuración antes de presionar el botón "Desplegar":

• Comando de construcción: astro build o npm run build
• Publicar directorio: dist

Google Firebase Copy Chapter

1. Asegúrate de tener firebase-tools instalado.

2. Crea firebase.json y .firebaserc en la raíz de tu proyecto con el siguiente contenido:

   firebase.json:

   json Copy

   {
     "hosting": {
       "public": "dist",
       "ignore": []
     }
   }

   .firebaserc:

   json Copy

   {
     "projects": {
       "default": "<YOUR_FIREBASE_ID>"
     }
   }

3. Después de ejecutar npm run build, despliega usando el comando firebase deploy.

Surge Copy Chapter

1. Primero instala surge, si aún no lo has hecho.

2. Ejecuta npm run build.

3. Despliega en Surge escribiendo surge dist.

También puedes implementar en un dominio personalizado agregando surge dist yourdomain.com.

Heroku Copy Chapter

1. Instalar Heroku CLI.

2. Crea una cuenta en Heroku registrándose.

3. Ejecuta heroku login y completa tus credenciales de Heroku:

   bash Copy

   $ heroku login

4. Crea un archivo llamado static.json en la raíz de su proyecto con el siguiente contenido:

   static.json:

   json Copy

   {
     "root": "./dist"
   }

   Esta es la configuración de su sitio; leer más en heroku-buildpack-static.

5. Configura tu git remoto de Heroku:

   bash Copy

   # cambio de versión
   $ git init
   $ git add .
   $ git commit -m "My site ready for deployment."
   
   # crear una nueva aplicación con un nombre específico
   $ heroku apps:create example
   
   # establecer buildpack para sitios estáticos
   $ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git

6. Implemente su sitio:

   bash Copy

   # publicar sitio
   $ git push heroku master
   
   # abre un navegador para ver la tablero de version de Heroku CI
   $ heroku open

Vercel Copy Chapter

Puede implementar Astro en Vercel a través de la CLI o las integraciones de Vercel Git.

CLI Copy Section

1. Instale la Vercel CLI y ejecute vercel para implementar.
2. Cuando se le pregunte ¿Desea anular la configuración? [s/N], seleccione S.
3. Actualice Directorio de salida a ./dist.
4. ¡Su aplicación está implementada! (por ejemplo, astro.vercel.app)

$ npm i -g vercel
$ vercel

Git Copy Section

1. Inserte su código en su repositorio git (GitHub, GitLab, BitBucket).
2. Importe su proyecto a Vercel.
3. Actualice Directorio de salida a ./dist.
4. ¡Su aplicación está implementada! (por ejemplo, astro.vercel.app)

Después de que su proyecto haya sido importado e implementado, todos los envíos subsiguientes a las sucursales generarán [Vista previa de implementaciones] (https://vercel.com/docs/concepts/deployments/environments#preview), y todos los cambios realizados en la rama de producción (comúnmente “principal”) dará como resultado una Implementación de producción.

Obtenga más información sobre [Git Integration] de Vercel (https://vercel.com/docs/concepts/git).

Aplicaciones web estáticas de Azure Copy Chapter

Puedes implementar tu proyecto Astro con el servicio Microsoft Azure Static Web Apps. Necesitas:

• Una cuenta de Azure y una clave de suscripción. Aquí puedes crear una cuenta gratuita de Azure.
• El código de tu aplicación enviado a GitHub.
• La Extensión SWA en Visual Studio Code.

Instala la extensión en VS Code y navega hasta la raíz de tu aplicación. Abre la extensión Static Web Apps, inicia sesión en Azure y haz clic en el signo '+' para crear una nueva Static Web App. Se te pedirá que designes qué clave de suscripción utilizar.

Sigue el asistente iniciado por la extensión para darle un nombre a tu aplicación, elige un framework preestablecido y designa la raíz de la aplicación (generalmente /) y la ubicación del archivo construido /dist. El asistente se ejecutará y creará una acción de GitHub en su repositorio en una carpeta .github.

La acción funcionará para desplegar tu aplicación (observa su progreso en la pestaña Acciones de tu repositorio) y, cuando se complete con éxito, podrá ver su aplicación en la dirección proporcionada en la ventana de progreso de la extensión haciendo clic en el botón 'Explorar sitio web' que aparece cuando el la acción de GitHub se ha ejecutado.

Cloudflare Pages Copy Chapter

Puedes implementar tu proyecto Astro en Cloudflare Pages. Necesitas:

• Una cuenta de Cloudflare. Si aún no tienes una, puedes crear una cuenta gratuita de Cloudflare durante el proceso.
• El código de tu aplicación enviado a un repositorio de GitHub.

Luego, configura un nuevo proyecto en Cloudflare Pages.

Utiliza la siguiente configuración de compilación:

• Framework preestablecido: Ninguno (Al momento de escribir este artículo, Astro no está en la lista).
• Comando de compilación: astro build o npm run build
• Directorio de salida de compilación: dist
• Variables de entorno (avanzadas): agrega una variable de entorno con el Nombre de variable de NODE_VERSION y un Valor de una Versión de node que es compatible con Astro, ya que la versión predeterminada de Cloudflare Pages probablemente no funcione.

Entonces haz clic en el botón Guardar y Desplegar.

Render Copy Chapter

Puedes desplegar tu proyecto Astro en Render siguiendo estos pasos:

1. Crea una cuenta en render.com e inicia sesión.
2. Haz clic en el botón Nuevo + de tu panel y selecciona Sitio estático.
3. Conecta tu repositorio de GitHub o GitLab o, alternativamente, introduce la URL pública de un repositorio público.
4. Asigna un nombre a tu sitio web, selecciona la rama y especifique el comando de compilación y el directorio de publicación.
   • comando de compilación: npm run build
   • directorio de publicación: dist
5. Haz clic en el botón Crear sitio estático.

Créditos Copy Chapter

Esta guía se basó originalmente en la guía de implementación estática bien documentada de Vite.

File: old-translations/es/guides/imports.md Copy Chapter

layout: ~/layouts/MainLayout.astro title: Importaciones soportadas Copy Chapter

Astro usa Snowpack como su sistema de construcción interno. Snowpack proporciona a Astro soporte integrado para los siguientes tipos de archivos, sin necesidad de configuración:

• JavaScript (.js, .mjs)
• TypeScript (.ts, .tsx)
• JSON (.json)
• JSX (.jsx, .tsx)
• CSS (.css)
• CSS Modules (.module.css)
• Imágenes y Activos (.svg, .jpg, .png, etc.)
• Componentes de Astro (.astro)
• Markdown (.md)
• WASM (.wasm)

Cualquier archivo en tu directorio public/ se copia en la compilación final, sin ser tocado por Snowpack o Astro. Lo siguiente se aplica a los archivos en su directorio src/, del cual Astro es responsable en última instancia.

JavaScript y ESM Copy Chapter

Astro fue diseñado para la sintaxis nativa de ES Module (ESM) de JavaScript. ESM te permite definir importaciones y exportaciones explícitas que los navegadores y las herramientas de compilación pueden comprender y optimizar mejor. Si estás familiarizado con las palabras clave "import" y "export" en JavaScript, ¡entonces ya conoces ESM!

// Ejemplo ESM - src/user.js
export function getUser() {
  /* ... */
}

// src/index.js
import { getUser } from './user.js';

Todos los navegadores ahora son compatibles con ESM, por lo que Astro puede enviar este código directamente al navegador durante el desarrollo.

TypeScript Copy Chapter

Astro incluye soporte integrado para crear archivos TypeScript (*.ts) en JavaScript. Los componentes de Astro también son compatibles con TypeScript en la sección de script preliminar.

Ten en cuenta que este soporte integrado es solo de compilación. De forma predeterminada, Astro no verifica el tipo de su código TypeScript.

JSX Copy Chapter

Astro incluye soporte integrado para construir archivos JSX (*.jsx & *.tsx) a JavaScript.

Si estás usando Preact, Astro detectará la importación de Preact y cambiará para usar la función estilo Preact de JSX h(). Todo esto se hace automáticamente.

Nota: Astro no admite JSX en archivos .js/.ts.

JSON Copy Chapter

// Carga el objeto JSON a través de la exportación predeterminada
import json from './data.json';

Astro admite la importación de archivos JSON directamente en tu aplicación. Los archivos importados devuelven el objeto JSON completo en la importación predeterminada.

CSS Copy Chapter

// Load and inject 'style.css' onto the page
import './style.css';

Astro admite la importación de archivos CSS directamente a tu aplicación. Los estilos importados no exponen exportaciones, pero la importación de uno agregará automáticamente esos estilos a la página. Esto funciona para todos los archivos CSS de forma predeterminada y puede admitir lenguajes de compilación a CSS como Sass y Less a través de complementos.

Si prefieres no escribir CSS, Astro también es compatible con todas las librerías populares de CSS en JS (por ejemplo, styled-components) para el estilo.

CSS Modules Copy Chapter

// 1. Convierte los nombres de clase './style.module.css' en valores únicos con ámbito.
// 2. Devuelve un objeto que asigna los nombres de clase originales a su valor de ámbito final.
import styles from './style.module.css';

// This example uses JSX, but you can use CSS Modules with any framework.
return <div className={styles.error}>Your Error Message</div>;

Astro admite módulos CSS utilizando la convención de nomenclatura [nombre].module.css. Al igual que con cualquier archivo CSS, la importación de uno aplicará automáticamente ese CSS a la página. Sin embargo, los módulos CSS exportan un objeto "estilos" predeterminado especial que asigna sus nombres de clase originales a identificadores únicos.

Los módulos CSS te ayudan a hacer cumplir el alcance y el aislamiento de los componentes en la interfaz con nombres de clase generados de forma única para sus hojas de estilo.

Otros activos Copy Chapter

import imgReference from './image.png'; // img === '/src/image.png'
import svgReference from './image.svg'; // svg === '/src/image.svg'
import txtReference from './words.txt'; // txt === '/src/words.txt'

// Este ejemplo usa JSX, pero puedes usar referencias de importación con cualquier marco.
<img src={imgReference} />;

Todos los demás activos que no se mencionan explícitamente anteriormente se pueden importar a través de "import" de ESM y devolverán una referencia de URL al activo final creado. Esto puede ser útil para hacer referencia a activos que no son de JS por URL, como crear un elemento de imagen con un atributo src que apunte a esa imagen.

WASM Copy Chapter

// Carga e inicializa el archivo WASM solicitado
const wasm = await WebAssembly.instantiateStreaming(fetch('/example.wasm'));

Astro admite la carga de archivos WASM directamente en tu aplicación utilizando la API WebAssembly del navegador.

Paquetes npm Copy Chapter

// Devuelve los paquetes npm React & React-DOM
import React from 'react';
import ReactDOM from 'react-dom';

Astro te permite importar paquetes npm directamente en el navegador. Incluso si un paquete se publicó utilizando un formato heredado, Astro convertirá el paquete a ESM antes de servirlo en el navegador.

Cuando inicies tu servidor de desarrollo o ejecutes una nueva compilación, es posible que vea un mensaje de que Snowpack está "instalando dependencias". Esto significa que Snowpack está convirtiendo sus dependencias para que se ejecuten en el navegador. Esto debe ejecutarse solo una vez, o hasta que cambie su árbol de dependencias agregando o quitando dependencias.

Incluidos en Node Copy Chapter

Recomendamos a los usuarios de Astro que eviten los archivos incorporados en Node.js (fs, path, etc.) siempre que sea posible. Astro pretende ser compatible con múltiples tiempos de ejecución de JavaScript en el futuro. Esto incluye Deno y Cloudflare Workers que no son compatibles con los módulos integrados de Node como fs.

Nuestro objetivo es proporcionar alternativas de Astro a las incorporaciones comunes de Node.js. Sin embargo, hoy en día no existen tales alternativas. Entonces, si realmente necesitas usar estos módulos incorporados, no queremos detenerte. Astro soporta incorporaciones de Node.js usando el prefijo node: más nuevo de Node. Si deseas leer un archivo, por ejemplo, puedes hacerlo así:

---
// Ejemplo: importar el "fs/promises" incorporado desde Node.js
import fs from 'node:fs/promises';

const url = new URL('../../package.json', import.meta.url);
const json = await fs.readFile(url, 'utf-8');
const data = JSON.parse(json);
---

<span>Versión: {data.version}</span>

File: old-translations/es/guides/layer-zero.md Copy Chapter

title: Despliega tu proyecto de Astro en Layer0 layout: ~/layouts/DeployGuideLayout.astro i18nReady: true Copy Chapter

Puedes desplegar tu proyecto de Astro en Layer0, una plataforma edge y CDN para desplegar, proteger y acelerar sitios web y APIs.

:::tip
¡Revisa la guía de Astro en la documentación de Layer0!
:::

Cómo desplegar Copy Chapter

1. Añade Layer0

   bash Copy

   # Primero, instala de forma global la CLI de Layer0:
   $ npm install -g @layer0/cli
   
   # Después, añade Layer0 a tu proyecto de Astro:
   $ 0 init

2. Actualiza tu Layer0 Router

   Pega el siguiente código dentro de routes.ts:

   js Copy

   // routes.ts
   import { Router } from '@layer0/core';
   
   export default new Router()
     .get(
       '/:path*/:file.:ext(js|css|png|ico|jpg|gif|svg)',
       ({ cache, serveStatic }) => {
         cache({
           browser: {
             // cachea js, css, e imágenes en el navegador por una hora...
             maxAgeSeconds: 60 * 60,
           },
           edge: {
             // ... y en edge por un año
             maxAgeSeconds: 60 * 60 * 24 * 365,
           },
         });
         serveStatic('dist/:path*/:file.:ext');
       }
     )
     .match('/:path*', ({ cache, serveStatic, setResponseHeader }) => {
       cache({
         // previene el navegador de cachear el html...
         browser: false,
         edge: {
           // ...cachea el html en edge por un año
           maxAgeSeconds: 60 * 60 * 24 * 365,
         },
       });
       setResponseHeader('content-type', 'text/html; charset=UTF-8');
       serveStatic('dist/:path*');
     });

   Puedes remover el backend de origen de layer0.config.js:

   js Copy

   module.exports = {};

3. Despliega en Layer0

   Para desplegar tu proyecto en Layer0, ejecuta:

   bash Copy

   # Crea un build de producción de tu proyecto
   $ npm run build
   
   # Despliégalo en Layer0
   $ 0 deploy

File: old-translations/es/guides/rss.md Copy Chapter

layout: ~/layouts/MainLayout.astro title: RSS Copy Chapter

Astro admite la generación de feeds RSS rápida y automática para blogs y otros sitios web de contenido.

Puedes crear una fuente RSS desde cualquier página de Astro que utilice una función getStaticPaths() para el enrutamiento. Solo las rutas dinámicas pueden usar getStaticPaths() hoy (ver Enrutamiento).

Esperamos que esta función esté disponible para todas las demás páginas antes de la v1.0. Como solución alternativa, puedes convertir una ruta estática en una ruta dinámica que solo genera una página. Consulta Enrutamiento para obtener más información sobre las rutas dinámicas.

Crea una fuente RSS llamando a la función rss() que se pasa como argumento a getStaticPaths (). Esto creará un archivo rss.xml en tu compilación final basado en los datos que proporciones usando el array items.

// Example: /src/pages/posts/[...page].astro
// Coloca esta función dentro de la secuencia de comandos del componente de Astro.
export async function getStaticPaths({rss}) {
  const allPosts = Astro.fetchContent('../post/*.md');
  const sortedPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
  // Genera un feed RSS de esta colección
  rss({
    // El título, la descripción y los metadatos personalizados de la fuente RSS.
    title: 'Don’s Blog',
    description: 'An example blog on Astro',
    customData: `<language>en-us</language>`,
    // The list of items for your RSS feed, sorted.
    items: sortedPosts.map(item => ({
      title: item.title,
      description: item.description,
      link: item.url,
      pubDate: item.date,
    })),
    // Opcional: personaliza dónde se escribe el archivo.
    // De lo contrario, el valor predeterminado es "/rss.xml".
    dest: "/my/custom/feed.xml",
  });
  // Devuelve tus rutas
  return [...];
}

Nota: Las fuentes RSS no se crearán durante el desarrollo. Actualmente, las fuentes RSS solo se generan durante la compilación final.

File: src/pages/de/guides/deploy/github.md Copy Chapter

title: Veröffentliche deine Astro-Website bei GitHub Pages layout: ~/layouts/DeployGuideLayout.astro i18nReady: true Copy Chapter

Du kannst GitHub Pages verwenden, um eine Astro-Website direkt von einem Repository auf GitHub.com zu hosten.

Wie du sie veröffentlichst Copy Chapter

Du kannst eine Astro-Website bei GitHub Pages veröffentlichen, indem du GitHub Actions verwendest und so deine Website automatisch erzeugst und veröffentlichst. Um dies zu erreichen, muss dein Quelltext auf GitHub liegen.

Astro pflegt die offizielle withastro/action, welche dein Projekt mit minimaler Konfiguration veröffentlicht. Folge den unten angeführten Anweisungen, um deine Astro-Website bei GitHub Pages zu veröffentlichen, und lies die README des Pakets, falls du mehr Informationen benötigst.

1. Setze die Optionen site und bei Bedarf auch base in astro.config.mjs.

   • site sollte in etwa https://<DEIN_NUTZERNAME>.github.io entsprechen
   • base sollte ein Schrägstrich gefolgt vom Namen deines Repositories sein, zum Beispiel /mein-repository.

   :::note
   Falls dein Repository <DEIN_NUTZERNAME>.github.io heißt, benötigst du die Option base nicht.
   :::

2. Erstelle eine neue Datei .github/workflows/deploy.yml in deinem Projekt und füge den folgenden YAML-Code ein:

   yaml Copy

   name: Github Pages Astro CI
   
   on:
     # Löst den Workflow bei jedem Push auf den `main`-Branch aus
     # Verwendest du einen anderen Branch-Namen? Ersetze `main` durch den Namen deines Branches
     push:
       branches: [ main ]
     # Erlaubt es dir, diesen Workflow manuell über den Actions-Tab auf GitHub zu starten
     workflow_dispatch:
     
   # Erlaubt diesem Job das Repository zu klonen und eine Veröffentlichung bei GitHub Pages zu erstellen
   permissions:
     contents: read
     pages: write
     id-token: write
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         - name: Checke dein Repository mit Git aus
           uses: actions/checkout@v2          
         - name: Installiere Abhängigkeiten, erzeuge deine Website und lade sie hoch
           uses: withastro/action@v0
   
     deploy:
       needs: build
       runs-on: ubuntu-latest
       environment:
         name: github-pages
         url: ${{ steps.deployment.outputs.page_url }}
       steps:
         - name: Bei GitHub Pages veröffentlichen
           id: deployment
           uses: actions/deploy-pages@v1

   :::caution
   Die offizielle Astro-Action sucht nach einem Lockfile, um deinen bevorzugten Paketmanager (npm, yarn oder pnpm) zu erkennen. Du solltest die von deinem Paketmanager automatisch generierte Datei package-lock.json, yarn.lock oder pnpm-lock.yaml zu deinem Repository hinzufügen.
   :::

3. Committe die neue Workflow-Datei und pushe sie zu GitHub.

4. Gehe auf GitHub zum Tab Settings deines Repositories und suche den Abschnitt Pages.

5. Wähle den gh-pages-Branch und das "/" (root)-Verzeichnis als Source deiner Website aus und drücke Save.

Deine Website sollte jetzt veröffentlicht sein! Wenn du Änderungen an deinem Astro-Projekt zu deinem Repository pushst, wird die GitHub Action diese automatisch veröffentlichen.

:::tip[Richte eine benutzerdefinierte Domäne ein]
Optional kannst du eine benutzerdefinierte Domäne einrichten, indem du die folgende Datei ./public/CNAME zu deinem Projekt hinzufügst:

sub.meine-domain.de

Dadurch wird deine Website auf deiner benutzerdefinierten Domäne veröffentlicht, und nicht auf <DEIN_NUTZERNAME>.github.io. Vergiss nicht, auch den DNS-Eintrag deines Domänen-Anbieters anzupassen.
:::

File: src/pages/de/guides/deploy/gitlab.md Copy Chapter

title: Veröffentliche deine Astro-Website mit GitLab Pages layout: ~/layouts/DeployGuideLayout.astro Copy Chapter

GitLab Pages ermöglichen es dir eine Astro-Website für deine GitLab Projekte, Gruppen oder Benutzerkonten bereitzustellen.

:::tip[Auf der Suche nach einem Beispiel?]
Schau dir das offizielle Astro-Beispiel für GitLab Pages an!
:::

So funktioniert die Veröffentlichung Copy Chapter

1. Setze den Parameter .site in astro.config.mjs auf den benötigten Wert.

2. Setze den Parameter dist in astro.config.mjs auf den Wert public und den Parameter public in astro.config.mjs auf einen neu benannten Ordner, der alles enthält, was sich derzeit in public befindet. Der Grund dafür ist, dass public ein zweiter Quellordner in Astro ist. Damit du Dateien von public veröffentlichen kannst, musst du die entsprechenden Dateien aus einem anderen Ordner holen. Ihre "astro.config.mjs" könnte damit so aussehen:

   js Copy

   export default defineConfig({
     sitemap: true,
     site: 'https://astro.build/',
   });

3. Erstelle eine Datei namens .gitlab-ci.yml im Stammverzeichnis deines Projekts mit folgendem Inhalt. Sobald du Änderungen an den Inhalten deiner Seite durchführst wird deine Website damit neu gebaut und veröffentlicht:

   yaml Copy

   image: node:14
   pages:
     cache:
       paths:
         - node_modules/
     script:
       - npm install
       - npm run build
     artifacts:
       paths:
         - public
     only:
       - main

--- METRICS ---

• Files Extracted: 12
• Estimated Token Budget: ~12237 tokens
• Recency Window: Active (< 180 days)
• Canonical Reference: https://codewiki.google/github.com/justjavac/wechat-miniapp-radar