Topics

Gestión de uso compartido de componentes

En el desarrollo web, hay casos raros en los que desea reutilizar los mismos componentes de UI en varios sitios web, ¿verdad?

Si desea optimizar el desarrollo de varios sitios web con un framework moderno como Astro, compartir bibliotecas de componentes es muy efectivo. Sin embargo, si comparte componentes como paquetes npm,Se requieren planes pagos para publicar paquetes privadosLo necesitarás.

Esta vez, presentaremos una forma de compartir y administrar componentes de manera eficiente usando un repositorio de GitHub y páginas de Cloudflare sin empaquetarlos con npm.

¿Cuáles son los desafíos de compartir componentes?

• ¡Quiero usar los mismos componentes de UI en varios sitios de Astro!
• ¡Quiero alojar con Cloudflare Pages!
• ¡Quiero administrar componentes en un repositorio privado en GitHub!
• Quiero empaquetar mi componente como un paquete npm, ¡pero no quiero hacerlo público!

Se ve así. ¿Qué deberías hacer?

Resuelto con un repositorio de GitHub y scripts de compilación personalizados

Para solucionar estos problemas, creo que sería una buena idea probar algo como esto:

1. Crea un repositorio de GitHub para tu componente
2. Utilice referencias de archivos para el desarrollo local
3. El entorno de Cloudflare Pages clona el repositorio de componentes en el momento de la compilación

Esto le permite compartir y administrar componentes sin utilizar paquetes npm privados.

La implementación se ve así

1. Crea un token de acceso personal de GitHub

Crea un token de acceso personal de GitHub para acceder a tus repositorios privados.

1. Iniciar sesión en GitHub
2. Haga clic en el icono de perfil en la esquina superior derecha → Configuración
3. En la barra lateral izquierda, seleccione "Configuración del desarrollador" → "Tokens de acceso personal" → "Tokens (clásicos)".
4. Haga clic en "Generar nuevo token" → "Generar nuevo token (clásico)"
5. Otorgue al token los siguientes permisos:
   • repo- Acceso completo a repositorios privados
6. Genere un token y guárdelo en un lugar seguro (solo se mostrará una vez)

2. Creación de una biblioteca de componentes

Cree un repositorio de GitHub para su componente (por ejemplo,github.com/your-username/ui-components）。

Paquete de biblioteca de componentes package.json

{
  "name": "@your-org/components",
  "private": true,
  "type": "module",
  "main": "src/index.ts",
  "exports": {
    ".": "./src/index.ts"
  },
  "files": [
    "src"
  ],
  "peerDependencies": {
    "astro": "^5.7.12"
  }
}

3. Establecer el proyecto principal

Configure el package.json de su proyecto principal para usar el componente.

package.json en el proyecto principal

{
  "name": "your-astro-project",
  "type": "module",
  "private": true,
  "config": {
    "componentVersion": "v1.0.0",
    "orgName": "your-username",
    "repoName": "ui-components",
    "namespace": "your-org",
    "packageName": "components"
  },
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "setup-components": "set -e; ORG_NAME=\\\\"$npm_package_config_orgName\\\\"; REPO_NAME=\\\\"$npm_package_config_repoName\\\\"; NAMESPACE=\\\\"$npm_package_config_namespace\\\\"; PACKAGE_NAME=\\\\"$npm_package_config_packageName\\\\"; VERSION=\\\\"$npm_package_config_componentVersion\\\\"; mkdir -p temp; git clone -b $VERSION <https://$GITHUB_TOKEN@github.com/$ORG_NAME/$REPO_NAME.git> temp/$REPO_NAME; mkdir -p node_modules/@$NAMESPACE; ln -sf $(pwd)/temp/$REPO_NAME node_modules/@$NAMESPACE/$PACKAGE_NAME",
    "build-with-components": "npm run setup-components && npm run build"
  },
  "dependencies": {
    "@your-org/components": "file:../ui-components"
  },
  "devDependencies": {
    // Astroなどの開発依存関係
  }
}

Los cuatro puntos siguientes son clave:

1. Sección de configuración:Gestión centralizada de la información de la biblioteca de componentes
2. script de componentes de configuración:Clonar componentes desde GitHub en el momento de la compilación
3. script de construcción con componentes:Un comando que combina la configuración y la compilación de un componente
4. dependencies：Referencias de archivos para el desarrollo local

4. Configure su entorno de desarrollo local

Clone la biblioteca de componentes en el mismo directorio que su proyecto y úsela como referencia de archivo.

proyectos/
├── ui-components/ # Biblioteca de componentes
└── your-astro-project/ # Proyecto principal

Cualquier cambio que realice en sus componentes mientras desarrolla localmente se reflejará inmediatamente en su proyecto principal.

5. Configuración de páginas de Cloudflare

Aquí te explicamos cómo configurarlo en Cloudflare Pages.

1. Configuración de variables de entorno:
   • Panel de control de páginas → tu-proyecto → Configuración → Variables de entorno
   • Nombres de variables:GITHUB_TOKEN
   • Valor: El token de acceso personal de GitHub que creó
2. Configurar el comando de compilación:
   • Panel de Páginas → su-proyecto → Configuración → Compilación e implementaciones
   • Build command: npm run build-with-components
   • Build output directory: dist(por defecto)

La versión especificada de la biblioteca de componentes se clonará automáticamente y se incluirá en el momento de la compilación.

Una vez completada la configuración, los componentes son fáciles de usar.

Una vez configurado, utilizar el componente es muy sencillo.

En la biblioteca de componentessrc/index.tsy exportar el componente.

export { default as Button } from './components/base/Button.astro';
export { default as Heading } from './components/base/Heading.astro';
// 他のコンポーネントもここでエクスポート

Importa los componentes que quieras utilizar en tu proyecto principal.

---
import { Button, Heading } from '@your-org/components';
---

<div>
  <Heading>Hello World</Heading>
  <Button>Click me</Button>
</div>

¿Qué pasa con el control de versiones?

Cuando desee lanzar una nueva versión de su biblioteca de componentes,

1. Realizar cambios en la biblioteca de componentes y confirmar
2. Crear una nueva etiqueta (por ejemplov1.1.0）
3. Actualizar package.json en el proyecto principal

   "config": {
     "componentVersion": "v1.1.0",
     // 他の設定...
   }
   
   

Cada proyecto puede utilizar la versión de un componente que necesite.

El flujo de desarrollo también es seguro

Es fantástico que el flujo de desarrollo sea seguro y eficiente, con menos cosas de las que preocuparse.

1. Desarrollar nuevas funciones o realizar mejoras en la biblioteca de componentes (por ejemplo,feature/new-buttonrama)
2. Puede probar y verificar instantáneamente los cambios en su entorno local en el proyecto principal.
3. Una vez que el desarrollo haya progresado hasta una determinada etapa, cree una etiqueta de prueba (por ejemplo,v1.1.0-test）
4. En la rama de prueba del proyecto principalcomponentVersionActualizar la etiqueta de prueba e implementar en el entorno de prueba
5. Una vez que haya confirmado que no hay problemas en el entorno de prueba, fusionelo con la rama principal de la biblioteca de componentes.
6. Esto se lleva a producción creando una nueva etiqueta de versión y actualizando la versión en el proyecto principal (por ejemplo,v1.1.0）

¡El punto clave es que puedes probar cambios en los componentes sin afectar el entorno de producción!

Entorno de producción de Cloudflare Pagesconfig.componentVersionDado que utiliza la versión de la etiqueta especificada enconfigPuede estar seguro de que los cambios no afectarán su entorno de producción a menos que actualice el

■ ¡Combine repositorios privados de GitHub y scripts de compilación personalizados sin usar paquetes npm privados!

■ ¡La gestión adecuada de los tokens de GitHub y la configuración correcta de los entornos de desarrollo locales permiten compartir componentes sin problemas entre todo el equipo!

¿Qué opinas?

Perfecto para equipos pequeños y medianos y proyectos rentables.

En el futuro, a medida que nuestro equipo y proyecto crezcan, podríamos considerar migrar a paquetes privados de npm, pero por ahora, creemos que este método proporciona una forma suficientemente eficiente de compartir componentes.

suplementoEsto también se puede aplicar a otros frameworks además de Astro (React, Vue, Svelte, etc.). Los detalles de configuración pueden variar, pero el enfoque básico es el mismo. Puedes personalizar tu proceso de compilación de forma similar incluso con servicios de alojamiento distintos a Cloudflare Pages.