Topics

Componentdelingsbeheer

In webontwikkeling zijn er zeldzame gevallen waarin u dezelfde UI-componenten op meerdere websites wilt hergebruiken, toch?

Als je de ontwikkeling van meerdere sites wilt stroomlijnen met een modern framework zoals Astro, is het delen van componentbibliotheken zeer effectief. Als je echter componenten deelt als NPM-pakketten,Voor het publiceren van privépakketten zijn betaalde abonnementen vereistJe zult het nodig hebben.

Deze keer laten we je zien hoe je componenten efficiënt kunt delen en beheren met behulp van een GitHub-repository en Cloudflare Pages, zonder ze te verpakken met npm!

Wat zijn de uitdagingen bij het delen van componenten?

• Ik wil dezelfde UI-componenten gebruiken op meerdere Astro-sites!
• Ik wil hosten met Cloudflare Pages!
• Ik wil componenten beheren in een privé-repository op GitHub!
• Ik wil mijn component verpakken als een npm-pakket, maar ik wil het niet openbaar maken!

Het ziet er zo uit. Wat moet je doen?

Opgelost met een GitHub-repository en aangepaste buildscripts

Om deze problemen op te lossen, denk ik dat het een goed idee zou zijn om zoiets te proberen:

1. Maak een GitHub-repository voor uw component
2. Gebruik bestandsverwijzingen voor lokale ontwikkeling
3. Cloudflare Pages-omgeving kloont componentenrepository tijdens de bouw

Hiermee kunt u componenten delen en beheren zonder dat u gebruik hoeft te maken van privé-npm-pakketten.

De implementatie ziet er als volgt uit

1. Maak een GitHub Personal Access Token

Maak een GitHub Personal Access Token om toegang te krijgen tot uw privé-opslagplaatsen.

1. Meld u aan bij GitHub
2. Klik op het profielpictogram in de rechterbovenhoek → Instellingen
3. Selecteer in de linkerzijbalk 'Ontwikkelaarsinstellingen' → 'Persoonlijke toegangstokens' → 'Tokens (klassiek)'
4. Klik op "Nieuw token genereren" → "Nieuw token genereren (klassiek)"
5. Geef het token de volgende rechten:
   • repo- Volledige toegang tot privé-opslagplaatsen
6. Genereer een token en bewaar deze op een veilige plek (deze wordt slechts één keer weergegeven)

2. Een componentenbibliotheek bouwen

Maak een GitHub-repository voor uw component (bijv.github.com/your-username/ui-components）。

Componentbibliotheek 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. Stel het hoofdproject in

Configureer het package.json van uw hoofdproject om het onderdeel te gebruiken.

package.json in het hoofdproject

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

De volgende vier punten zijn essentieel.

1. configuratie sectie:Gecentraliseerd beheer van componentbibliotheekinformatie
2. setup-components-script:Componenten klonen van GitHub tijdens de bouw
3. script voor bouwen met componenten:Een opdracht die de installatie en bouw van een component combineert
4. dependencies：Bestandsverwijzingen voor lokale ontwikkeling

4. Stel uw lokale ontwikkelomgeving in

Kloon de componentenbibliotheek in dezelfde directory als uw project en gebruik deze als bestandsreferentie.

projecten/
├── ui-componenten/ # Componentenbibliotheek
└── your-astro-project/ # Hoofdproject

Wijzigingen die u aanbrengt in uw componenten terwijl u lokaal ontwikkelt, worden direct doorgevoerd in uw hoofdproject.

5. Cloudflare-pagina's instellen

Hier leest u hoe u dit instelt op Cloudflare Pages.

1. Omgevingsvariabelen instellen:
   • Paginadashboard → uw-project → Instellingen → Omgevingsvariabelen
   • Variabelenamen:GITHUB_TOKEN
   • Waarde: de GitHub Personal Access Token die u hebt gemaakt
2. De build-opdracht configureren:
   • Pagina's Dashboard → uw-project → Instellingen → Bouwen & implementaties
   • Build command: npm run build-with-components
   • Build output directory: dist(standaard)

De opgegeven versie van de componentenbibliotheek wordt automatisch gekloond en opgenomen tijdens de build.

Zodra de installatie is voltooid, zijn de componenten eenvoudig te gebruiken

Nadat u het component hebt geconfigureerd, is het heel eenvoudig te gebruiken.

In de componentenbibliotheeksrc/index.tsen exporteer het onderdeel.

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

Importeer de componenten die u in uw hoofdproject wilt gebruiken.

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

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

Hoe zit het met versiebeheer?

Wanneer u een nieuwe versie van uw componentenbibliotheek wilt vrijgeven,

1. Wijzigingen aanbrengen in de componentenbibliotheek en vastleggen
2. Maak een nieuwe tag (bijv.v1.1.0）
3. Update package.json in het hoofdproject

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

Elk project kan de versie van een component gebruiken die het nodig heeft.

Ontwikkelingsstroom is ook veilig

Het is geweldig dat de ontwikkelingsstroom veilig en efficiënt verloopt, zodat we ons minder zorgen hoeven te maken.

1. Ontwikkel nieuwe functies of breng verbeteringen aan in de componentenbibliotheek (bijv.feature/new-buttontak)
2. U kunt de wijzigingen direct testen en verifiëren in uw lokale omgeving in het hoofdproject.
3. Zodra de ontwikkeling een bepaald stadium heeft bereikt, maakt u een testtag (bijv.v1.1.0-test）
4. In de testbranch van het hoofdprojectcomponentVersionBijwerken naar de testtag en implementeren in de testomgeving
5. Zodra u hebt vastgesteld dat er geen problemen zijn in de testomgeving, voegt u deze samen met de hoofdtak van de componentenbibliotheek.
6. Dit wordt naar productie gepusht door een nieuwe versietag te maken en de versie in het hoofdproject bij te werken (bijv.v1.1.0）

Het belangrijkste is dat u componentwijzigingen kunt testen zonder dat dit gevolgen heeft voor de productieomgeving!

Cloudflare Pages-productieomgevingconfig.componentVersionOmdat het de versie van de tag gebruikt die is opgegeven inconfigU kunt er zeker van zijn dat de wijzigingen geen invloed zullen hebben op uw productieomgeving, tenzij u de

■ Combineer GitHub-privérepositories en aangepaste buildscripts zonder privé-npm-pakketten te gebruiken!

■ Goed beheer van GitHub-tokens en een correcte configuratie van lokale ontwikkelomgevingen zorgen voor een naadloze uitwisseling van componenten met het hele team!

Wat denk jij?

Ideaal voor kleine tot middelgrote teams en kosteneffectieve projecten.

In de toekomst, naarmate ons team en project groeien, overwegen we wellicht om te migreren naar npm-private pakketten, maar voor nu denken we dat deze methode een voldoende efficiënte manier biedt om componenten te delen!

supplement: Dit kan ook worden toegepast op andere frameworks dan Astro (React, Vue, Svelte, enz.). De configuratiedetails kunnen verschillen, maar de basisbenadering is hetzelfde! Je kunt je buildproces op een vergelijkbare manier aanpassen, zelfs met andere hostingdiensten dan Cloudflare Pages.