Comment partager des composants Astro privés sans npm

Gestion du partage de composants

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

Lorsque vous utilisez un framework moderne comme Astro pour développer plusieurs sites et que vous souhaitez optimiser l'efficacité, le partage de bibliothèques de composants est très efficace. Cependant, si vous partagez des composants en tant que paquets npm, la publication de paquets privés nécessite un plan payant.

Cette fois, nous vous présenterons une méthode pour partager et gérer efficacement les composants en utilisant un référentiel GitHub et Cloudflare Pages, sans les packager avec npm !

Quels sont les défis du partage de composants ?

Je veux utiliser les mêmes composants d'interface sur plusieurs sites Astro !
Je veux l'héberger sur Cloudflare Pages !
Je veux gérer mes composants dans un dépôt privé GitHub !
Je veux transformer mes composants en package npm, mais sans les rendre publics !

Exactement. Alors, comment procéder ?

Résoudre le problème avec un dépôt GitHub et un script de build personnalisé

Afin de résoudre ces problèmes, je vous propose d'adopter cette approche.

Créer un dépôt GitHub dédié aux composants
Utiliser des références de fichiers pour le développement local
Cloner le dépôt des composants lors du build sur Cloudflare Pages

Vous pouvez partager et gérer vos composants sans recourir aux packages npm privés.

La mise en œuvre ressemble à ceci

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

Créez un jeton d'accès personnel GitHub pour accéder aux référentiels privés.

Se connecter à GitHub
Cliquez sur l'icône de profil en haut à droite → Paramètres
Dans la barre latérale de gauche, sélectionnez « Developer settings » → « Personal access tokens » → « Tokens (classic) »
Cliquez sur « Generate new token » → « Generate new token (classic) »
Accordez les autorisations suivantes au jeton :
- repo - accès complet aux référentiels privés
Générez le jeton et enregistrez-le dans un endroit sécurisé (il ne s'affichera qu'une seule fois)

2. Construire une bibliothèque de composants

Créez un référentiel GitHub pour les composants (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. Configurer le projet principal

Configurez le package.json du projet principal qui utilise les composants.

Package.json du 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.

Section config : gérez les informations de la bibliothèque de composants de manière centralisée
Script setup-components : clonez les composants depuis GitHub au moment de la compilation
Script build-with-components : combinez la configuration des composants et la compilation
Dependencies : référencez des fichiers pour le développement local

4. Configuration de l'environnement de développement local

Clonez la bibliothèque de composants au même niveau que votre projet et utilisez-la via des références de fichiers.

projects/
  ├── ui-components/         # コンポーネントライブラリ
  └── your-astro-project/     # メインプロジェクト

Lorsque vous modifiez les composants en développement local, les modifications se reflètent immédiatement dans le projet principal.

5. Configuration de Cloudflare Pages

Voici la configuration pour Cloudflare Pages.

Configuration des variables d'environnement :
- Tableau de bord Pages → votre-projet → Settings → Environment variables
- Nom de la variable : GITHUB_TOKEN
- Valeur : votre GitHub Personal Access Token créé
Configuration de la commande de build :
- Tableau de bord Pages → votre-projet → Paramètres → Build & deployments
- Build command: npm run build-with-components
- Répertoire de sortie de build : dist (par défaut)

La bibliothèque de composants de la version spécifiée est automatiquement clonée et intégrée lors du build.

Utiliser facilement les composants une fois la configuration terminée

Une fois la configuration terminée, l'utilisation des composants est très simple.

Créez src/index.ts dans la bibliothèque de composants et exportez les composants.

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 le projet principal.

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

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

Et la gestion des versions ?

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

Apportez des modifications à la bibliothèque de composants et validez-les
Créer une nouvelle étiquette (ex : v1.1.0)

Mettre à jour le package.json du projet principal

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

Chaque projet peut utiliser la version du composant dont il a besoin.

Le flux de développement est également sécurisé

Un flux de développement sûr et efficace signifie moins de points à gérer, ce qui est gratifiant.

Développer et améliorer de nouvelles fonctionnalités dans la bibliothèque de composants (ex : branche feature/new-button)
Tester et vérifier immédiatement les modifications dans le projet principal en environnement local
Une fois le développement arrivé à un certain stade, créer une étiquette de test (ex : v1.1.0-test)
Sur la branche de test du projet principal, mettre à jour componentVersion avec l'étiquette de test et déployer dans l'environnement de test
Une fois confirmé qu'il n'y a aucun problème en environnement de test, fusionner avec la branche main de la bibliothèque de composants
En créant une nouvelle balise de version et en mettant à jour la version du projet principal, les modifications sont reflétées en production (par exemple : v1.1.0)

L'avantage est de pouvoir tester les modifications de composants sans impact sur l'environnement de production !

L'environnement de production de Cloudflare Pages utilise la version de la balise spécifiée par config.componentVersion, donc tant que vous ne créez pas une nouvelle balise et ne mettez pas à jour config, vos modifications n'affecteront pas l'environnement de production – tranquillité d'esprit garantie !

■ Combinez les référentiels privés GitHub et les scripts de build personnalisés sans utiliser les paquets privés npm !

■ Une gestion appropriée des jetons GitHub et une configuration correcte de l'environnement de développement local permettent un partage transparent des composants dans toute l'équipe !

Qu'en pensez-vous ?

Cette approche n'est-elle pas idéale pour les petites et moyennes équipes, ou les projets privilégiant l'efficacité des coûts ?

À l'avenir, si votre équipe ou votre projet s'agrandit, une migration vers les paquets privés npm peut être envisagée, mais pour le moment, cette méthode permet déjà un partage de composants très efficace !

Remarque : cette approche peut également s'appliquer à d'autres frameworks (React, Vue, Svelte, etc.). Les détails de configuration peuvent différer, mais l'approche fondamentale reste la même ! Pour les services d'hébergement autres que Cloudflare Pages, vous pouvez également personnaliser le processus de build de manière similaire.