Topics

Gestion du partage des composants

En développement web, il est rare de vouloir réutiliser les mêmes composants d'interface utilisateur sur plusieurs sites web, n'est-ce pas ?

Si vous souhaitez simplifier le développement de plusieurs sites à l'aide d'un framework moderne comme Astro, le partage de bibliothèques de composants est très efficace. Cependant, si vous partagez les composants sous forme de packages npm,Des abonnements payants sont nécessaires pour publier des colis privés.Vous en aurez besoin.

Cette fois-ci, nous allons vous présenter une méthode pour partager et gérer efficacement des composants à l'aide d'un dépôt GitHub et de Cloudflare Pages, sans avoir à les empaqueter avec npm !

Quels sont les défis liés au partage de composants ?

• Je souhaite utiliser les mêmes composants d'interface utilisateur sur plusieurs sites Astro !
• Je souhaite héberger mon site avec Cloudflare Pages !
• Je souhaite gérer les composants dans un dépôt privé sur GitHub !
• Je souhaite empaqueter mon composant sous forme de package npm, mais je ne veux pas le rendre public !

Voici à quoi cela ressemble. Alors, que devez-vous faire ?

Résolu grâce à un dépôt GitHub et des scripts de compilation personnalisés.

Pour résoudre ces problèmes, je pense qu'il serait judicieux d'essayer quelque chose comme ceci :

1. Créez un dépôt GitHub pour votre composant
2. Utilisez des références de fichiers pour le développement local
3. L'environnement Cloudflare Pages clone le dépôt de composants lors de la compilation.

Cela vous permet de partager et de gérer des composants sans utiliser de packages npm privés.

L'implémentation ressemble à ceci

1. Créez un jeton d'accès personnel GitHub

Créez un jeton d'accès personnel GitHub pour accéder à vos dépôts privés.

1. Connectez-vous à GitHub
2. Cliquez sur l'icône de profil en haut à droite → Paramètres
3. Dans la barre latérale gauche, sélectionnez « Paramètres pour les développeurs » → « Jetons d'accès personnels » → « Jetons (classiques) ».
4. Cliquez sur « Générer un nouveau jeton » → « Générer un nouveau jeton (classique) »
5. Accordez au jeton les autorisations suivantes :
   • repo- Accès complet aux dépôts privés
6. Générez un jeton et conservez-le en lieu sûr (il ne sera affiché qu'une seule fois).

2. Création d'une bibliothèque de composants

Créez un dépôt GitHub pour votre composant (par exemple,github.com/your-username/ui-components）。

package.json de la bibliothèque de composants

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

3. Définir le projet principal

Configurez le fichier package.json de votre projet principal pour utiliser le composant.

package.json dans le projet 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などの開発依存関係
  }
}

Les quatre points suivants sont essentiels.

1. section de configuration :Gestion centralisée des informations de la bibliothèque de composants
2. script setup-components :Cloner les composants depuis GitHub au moment de la compilation
3. script build-with-components :Une commande qui combine la configuration et la construction d'un composant
4. dependencies：Références de fichiers pour le développement local

4. Configurez votre environnement de développement local

Clonez la bibliothèque de composants dans le même répertoire que votre projet et utilisez-la comme référence de fichier.

projets/
├── ui-components/ # Bibliothèque de composants
└── votre-projet-astro/ # Projet principal

Toute modification apportée à vos composants lors du développement local est immédiatement répercutée dans votre projet principal.

5. Configuration des pages Cloudflare

Voici comment le configurer sur Cloudflare Pages.

1. Définition des variables d'environnement:
   • Tableau de bord Pages → votre-projet → Paramètres → Variables d'environnement
   • Noms des variables :GITHUB_TOKEN
   • Valeur : Le jeton d’accès personnel GitHub que vous avez créé
2. Configuration de la commande de compilation:
   • Tableau de bord Pages → votre-projet → Paramètres → Génération et déploiements
   • Build command: npm run build-with-components
   • Build output directory: dist(défaut)

La version spécifiée de la bibliothèque de composants sera automatiquement clonée et incluse lors de la compilation.

Une fois l'installation terminée, les composants sont faciles à utiliser

Une fois configuré, l'utilisation du composant est très simple.

Dans la bibliothèque de composantssrc/index.tset exporter le composant.

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

Importez les composants que vous souhaitez utiliser dans votre projet principal.

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

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

Qu'en est-il du contrôle de version ?

Lorsque vous souhaitez publier une nouvelle version de votre bibliothèque de composants,

1. Apportez les modifications à la bibliothèque de composants et validez-les.
2. Créez une nouvelle étiquette (par exemple,v1.1.0）
3. Mettre à jour le fichier package.json dans le projet principal

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

Chaque projet peut utiliser la version d'un composant dont il a besoin.

Le flux de développement est également sûr

C'est formidable que le processus de développement soit sûr et efficace, avec moins de sources d'inquiétude.

1. Développer de nouvelles fonctionnalités ou apporter des améliorations à la bibliothèque de composants (par exemple,feature/new-buttonbifurquer)
2. Vous pouvez instantanément tester et vérifier les modifications apportées à votre environnement local dans le projet principal.
3. Une fois que le développement a atteint un certain stade, créez une balise de test (par exemple,v1.1.0-test）
4. Dans la branche de test du projet principalcomponentVersionMettez à jour l'étiquette de test et déployez-la dans l'environnement de test.
5. Une fois que vous avez confirmé qu'il n'y a aucun problème dans l'environnement de test, fusionnez-le dans la branche principale de la bibliothèque de composants.
6. Cette modification est déployée en production en créant une nouvelle étiquette de version et en mettant à jour la version dans le projet principal (par exemple,v1.1.0）

L'essentiel est que vous pouvez tester les modifications des composants sans affecter l'environnement de production !

Environnement de production Cloudflare Pagesconfig.componentVersionPuisqu'elle utilise la version de l'étiquette spécifiée dansconfigVous pouvez être assuré que les modifications n'affecteront pas votre environnement de production, sauf si vous mettez à jour le

■ Combinez les dépôts privés GitHub et les scripts de construction personnalisés sans utiliser de packages npm privés !

■ Une gestion appropriée des jetons GitHub et une configuration correcte des environnements de développement locaux permettent un partage transparent des composants au sein de toute l'équipe !

Qu'en penses-tu?

Idéal pour les petites et moyennes équipes et les projets économiques.

À l'avenir, à mesure que notre équipe et notre projet grandiront, nous pourrions envisager de migrer vers des packages privés npm, mais pour l'instant, nous pensons que cette méthode offre un moyen suffisamment efficace de partager des composants !

supplémentCela s'applique également à d'autres frameworks qu'Astro (React, Vue, Svelte, etc.). Les détails de configuration peuvent varier, mais le principe reste le même ! Vous pouvez personnaliser votre processus de compilation de la même manière, même avec des services d'hébergement autres que Cloudflare Pages.