Topics

Verwaltung der gemeinsamen Nutzung von Komponenten

In der Webentwicklung gibt es seltene Fälle, in denen Sie dieselben UI-Komponenten auf mehreren Websites wiederverwenden möchten, nicht wahr?

Wenn Sie die Entwicklung mehrerer Websites mit einem modernen Framework wie Astro optimieren möchten, ist die gemeinsame Nutzung von Komponentenbibliotheken sehr effektiv. Wenn Sie Komponenten jedoch als npm-Pakete freigeben,Für die Veröffentlichung privater Pakete sind kostenpflichtige Pläne erforderlichSie werden es brauchen.

Dieses Mal stellen wir eine Möglichkeit vor, Komponenten mithilfe eines GitHub-Repositorys und Cloudflare Pages effizient zu teilen und zu verwalten, ohne sie mit npm zu verpacken!

Welche Herausforderungen bringt die gemeinsame Nutzung von Komponenten mit sich?

• Ich möchte dieselben UI-Komponenten auf mehreren Astro-Sites verwenden!
• Ich möchte mit Cloudflare Pages hosten!
• Ich möchte Komponenten in einem privaten Repository auf GitHub verwalten!
• Ich möchte meine Komponente als NPM-Paket verpacken, aber nicht öffentlich machen!

Es sieht so aus. Was sollten Sie also tun?

Gelöst mit einem GitHub-Repository und benutzerdefinierten Build-Skripten

Um diese Probleme zu lösen, wäre es meiner Meinung nach eine gute Idee, Folgendes auszuprobieren:

1. Erstellen Sie ein GitHub-Repository für Ihre Komponente
2. Verwenden Sie Dateireferenzen für die lokale Entwicklung
3. Cloudflare Pages-Umgebung klont Komponenten-Repository zur Build-Zeit

Dadurch können Sie Komponenten freigeben und verwalten, ohne private npm-Pakete zu verwenden.

Die Implementierung sieht so aus

1. Erstellen Sie ein persönliches GitHub-Zugriffstoken

Erstellen Sie ein persönliches GitHub-Zugriffstoken, um auf Ihre privaten Repositories zuzugreifen.

1. Melden Sie sich bei GitHub an
2. Klicken Sie auf das Profilsymbol in der oberen rechten Ecke → Einstellungen
3. Wählen Sie in der linken Seitenleiste „Entwicklereinstellungen“ → „Persönliche Zugriffstoken“ → „Token (klassisch)“
4. Klicken Sie auf „Neues Token generieren“ → „Neues Token generieren (klassisch)“
5. Geben Sie dem Token die folgenden Berechtigungen:
   • repo- Voller Zugriff auf private Repositories
6. Generieren Sie ein Token und speichern Sie es an einem sicheren Ort (es wird nur einmal angezeigt)

2. Erstellen einer Komponentenbibliothek

Erstellen Sie ein GitHub-Repository für Ihre Komponente (z. B.github.com/your-username/ui-components）。

Komponentenbibliothek 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. Legen Sie das Hauptprojekt fest

Konfigurieren Sie die Datei package.json Ihres Hauptprojekts, um die Komponente zu verwenden.

Hauptprojekt package.json

{
  "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などの開発依存関係
  }
}

Die folgenden vier Punkte sind entscheidend.

1. Konfigurationsabschnitt:Zentralisierte Verwaltung von Komponentenbibliotheksinformationen
2. Setup-Komponenten-Skript:Klonen Sie Komponenten zur Build-Zeit von GitHub
3. Build-with-Components-Skript:Ein Befehl, der das Einrichten und Erstellen einer Komponente kombiniert
4. dependencies：Dateireferenzen für die lokale Entwicklung

4. Richten Sie Ihre lokale Entwicklungsumgebung ein

Klonen Sie die Komponentenbibliothek in dasselbe Verzeichnis wie Ihr Projekt und verwenden Sie sie als Dateireferenz.

Projekte/
├── UI-Komponenten/ # Komponentenbibliothek
└── Ihr Astro-Projekt/ # Hauptprojekt

Alle Änderungen, die Sie während der lokalen Entwicklung an Ihren Komponenten vornehmen, werden sofort in Ihrem Hauptprojekt widergespiegelt.

5. Cloudflare-Seiten einrichten

So richten Sie es auf Cloudflare Pages ein.

1. Festlegen von Umgebungsvariablen:
   • Seiten-Dashboard → Ihr Projekt → Einstellungen → Umgebungsvariablen
   • Variablennamen:GITHUB_TOKEN
   • Wert: Das von Ihnen erstellte persönliche GitHub-Zugriffstoken
2. Konfigurieren des Build-Befehls:
   • Seiten-Dashboard → Ihr Projekt → Einstellungen → Build & Bereitstellungen
   • Build command: npm run build-with-components
   • Build output directory: dist(Standard)

Die angegebene Version der Komponentenbibliothek wird automatisch geklont und zur Build-Zeit eingefügt.

Nach Abschluss der Einrichtung sind die Komponenten einfach zu verwenden

Nach der Konfiguration ist die Verwendung der Komponente sehr einfach.

In der Komponentenbibliotheksrc/index.tsund exportieren Sie die Komponente.

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

Importieren Sie die Komponenten, die Sie in Ihrem Hauptprojekt verwenden möchten.

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

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

Was ist mit der Versionskontrolle?

Wenn Sie eine neue Version Ihrer Komponentenbibliothek veröffentlichen möchten,

1. Nehmen Sie Änderungen an der Komponentenbibliothek vor und übernehmen Sie diese
2. Erstellen Sie ein neues Tag (z. B.v1.1.0）
3. Aktualisieren Sie package.json im Hauptprojekt

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

Jedes Projekt kann die Version einer Komponente verwenden, die es benötigt.

Der Entwicklungsfluss ist auch sicher

Es ist großartig, dass der Entwicklungsablauf sicher und effizient ist und man sich um weniger Dinge kümmern muss.

1. Entwickeln Sie neue Funktionen oder nehmen Sie Verbesserungen an der Komponentenbibliothek vor (z. B.feature/new-buttonZweig)
2. Sie können die Änderungen in Ihrer lokalen Umgebung sofort im Hauptprojekt testen und überprüfen.
3. Sobald die Entwicklung ein bestimmtes Stadium erreicht hat, erstellen Sie ein Test-Tag (z. B.v1.1.0-test）
4. Im Testzweig des HauptprojektscomponentVersionAktualisieren Sie das Test-Tag und stellen Sie es in der Testumgebung bereit
5. Sobald Sie bestätigt haben, dass in der Testumgebung keine Probleme vorliegen, führen Sie sie in den Hauptzweig der Komponentenbibliothek zusammen.
6. Dies wird in die Produktion übertragen, indem ein neues Versionstag erstellt und die Version im Hauptprojekt aktualisiert wird (z. B.v1.1.0）

Der entscheidende Punkt ist, dass Sie Komponentenänderungen testen können, ohne die Produktionsumgebung zu beeinträchtigen!

Cloudflare Pages-Produktionsumgebungconfig.componentVersionDa es die Version des Tags verwendet, die inconfigSie können sicher sein, dass die Änderungen keine Auswirkungen auf Ihre Produktionsumgebung haben, es sei denn, Sie aktualisieren die

■ Kombinieren Sie private GitHub-Repositorys und benutzerdefinierte Build-Skripte, ohne private npm-Pakete zu verwenden!

■ Die ordnungsgemäße Verwaltung von GitHub-Token und die korrekte Konfiguration lokaler Entwicklungsumgebungen ermöglicht eine nahtlose gemeinsame Nutzung von Komponenten im gesamten Team!

Was denken Sie?

Perfekt für kleine bis mittelgroße Teams und kostengünstige Projekte.

Wenn unser Team und unser Projekt in Zukunft wachsen, werden wir möglicherweise eine Migration auf private npm-Pakete in Betracht ziehen, aber im Moment glauben wir, dass diese Methode eine ausreichend effiziente Möglichkeit zum Teilen von Komponenten bietet!

ergänzen: Dies kann auch auf andere Frameworks als Astro (React, Vue, Svelte usw.) angewendet werden. Die Konfigurationsdetails können unterschiedlich sein, aber der grundlegende Ansatz ist derselbe! Sie können Ihren Build-Prozess auch mit anderen Hosting-Diensten als Cloudflare Pages auf ähnliche Weise anpassen.