Les 11 articles précédents ont été utilisés pour partager le développement, la construction et la sortie du projet de bibliothèque de composants de l'ensemble complet de quatre pièces (bibliothèque de composants, documentation, exemple, cli) basé sur vue3 et Monorepo. Cet article est une extension de ces 11 articles : comment publier sur GitHub et comment utiliser rapidement GitHub pour publier des documents de bibliothèque de composants. De cette manière, la série « Component Library Framework » d'Elegant Brother forme une boucle fermée : du développement à l'open source. Avant de commencer cet article, veuillez créer un compte GitHub et vous connecter.
1 ValiderGitHub
1.1 Créer un référentiel
Après vous être connecté à GitHub, cliquez sur "+" - "Nouveau référentiel" dans le coin supérieur droit pour créer un référentiel, comme indiqué ci-dessous :
Après être entré dans la page de création d'entrepôt, remplissez le nom de l'entrepôt (en ce qui concerne le nom de l'entrepôt, Elegant Brother a l'habitude d'utiliser le nom du projet local), et cliquez sur le bouton « Créer un référentiel » en bas de la page :
Une fois l'entrepôt créé, vous accéderez à la page de l'entrepôt, où il est clairement indiqué comment soumettre le code local à l'entrepôt GitHub.
1.2 Code push
Entrez le répertoire racine du projet dans la commande et exécutez les commandes suivantes afin de soumettre le code au référentiel GitHub créé ci-dessus.
- Initialisez le dépôt Git local :
git init
- Ajoutez des fichiers à valider dans git :
git add .
- Soumettez le code au référentiel local :
git commit -m 'feat: 初始化组件库工程'
- Configurez la branche principale :
git branch -M main
- Ajouter un entrepôt distant. Cette ligne de commande est visible sur la page ci-dessus une fois l'entrepôt créé avec succès :
git remote add origin [email protected]:HeroCloudy/yyg-demo-ui.git
- Transférez le code vers le dépôt GitHub :
git push -u origin main
Cela soumettra le code local à GitHub. Actualisez la page de l'entrepôt, comme indiqué ci-dessous :
Si des modifications ultérieures sont apportées au code, utilisez d'abord git commit pour le soumettre à l'entrepôt local, puis utilisez la commande git push pour le transmettre à GitHub.
2 Publier la documentation de la bibliothèque de composants
Le code a été publié sur GitHub. Ensuite, nous espérons utiliser pleinement les ressources de GitHub et publier le document packagé de la bibliothèque de composants sur GitHub afin que les utilisateurs puissent accéder directement au document.
GitHub fournit une fonctionnalité pages , grâce à laquelle nous pouvons publier des ressources HTML statiques sur GitHub et prendre en charge l'accès aux pages Web sous forme de HTTP.
L’idée de mise en œuvre est la suivante :
- Créer la documentation de la bibliothèque de composants ;
- Soumettez et transmettez le document de la bibliothèque de composants construit ( ./docs/.vitepress/dist ) vers une autre branche de l'entrepôt ;
- Configurez les pages GitHub pour pointer vers la nouvelle branche ci-dessus.
2.1 Documentation de la bibliothèque de composants de construction
Nous avons précédemment configuré la commande build du document de la bibliothèque de composants :
pnpm run docs:build
Attendez la fin de la construction et vous verrez que le contenu packagé se trouve dans le répertoire ./docs/.vitepress/dist.
2.2 Pousser vers la nouvelle branche de GitHub
Une fois le document créé, il doit être soumis à une nouvelle branche. Si cela est fait manuellement, cela sera plus fastidieux. Frère Yaya recommande d'utiliser un outil npm pour nous aider à terminer cette opération - gh-pages .
Installez gh-pages dans le répertoire racine du projet :
pnpm install gh-pages -D -w
Ensuite, vous pouvez utiliser gh-pages pour soumettre le répertoire spécifié à une nouvelle branche de github (branche gh_pages) :
gh-pages -d docs/.vitepress/dist
Après un certain temps, la console affichera Publié , ce qui signifie que la version est réussie. À ce stade, vous pouvez consulter les branches de l'entrepôt :
Exécutez d'abord git fetch pour extraire les dernières informations sur les branches sur GitHub, puis exécutez git branch -a pour afficher toutes les branches locales et distantes. Le résultat est le suivant :
Vous pouvez voir qu'il existe une branche distante supplémentaire nommée gh-pages . Nous pouvons également voir cette branche sur la page d'accueil de l'entrepôt GitHub :
Pour rappel, l'opération ci-dessus comporte deux étapes :
- Documentation de la bibliothèque de composants du package
- Poussez le contenu packagé du document vers la branche gh-pages.
Nous pouvons ajouter un nouveau script dans package.json dans le répertoire racine du projet pour combiner les deux opérations ci-dessus :
"scripts": {
...
"docs:deploy": "pnpm run docs:build && gh-pages -d docs/.vitepress/dist",
...
},
Lors de la modification ultérieure du contenu du document de la bibliothèque de composants, il vous suffit d'exécuter pnpm run docs:deploy .
2.3 Configurer les pages GitHub
1) Cliquez sur le bouton Paramètres sur la page d'accueil de l'entrepôt pour accéder à la page des paramètres de l'entrepôt.
2) Cliquez sur pages sur le côté gauche de la page des paramètres pour accéder à la page Pages GitHub. Sur cette page, vous pouvez voir que la branche gh-pages est configurée pour nous par défaut et nous indique également l'adresse d'accès :
3) Lorsque vous accédez au chemin dans le navigateur, vous constaterez que l'affichage est anormal, car le chemin de contexte (BaseUrl) configuré dans le module de document de la bibliothèque de composants est différent du chemin de contexte réel.
2.4 Le chemin contextuel du document de la bibliothèque de composants différencie l'environnement
Enfin, nous devons modifier le chemin contextuel de la bibliothèque de composants. S'il s'agit d'un processus simple, modifiez simplement la valeur de l'attribut de base de l'objet exporté dans docs/.vitepress/config.ts . Le chemin de contexte dans les pages github est : /yyg-demo-ui/ , il vous suffit donc de simplement changer base: '/' en base: '/yyg-demo-ui/' . Mais dans ce cas, le chemin d'accès doit également porter ce contexte http://localhost:3100/yyg-demo-ui lors du développement local .
Alors comment utiliser / pour le développement local et /yyg-demo-ui/ pour le packaging et la construction ? Il suffit de suivre les trois étapes suivantes pour y parvenir :
1) Ajoutez le minimum de dépendance de développement dans le module docs , qui sert à extraire les paramètres dans la commande :
pnpm install minimist -D
2) Modifiez la commande build dans le module docs et ajoutez un paramètre build à la commande :
"scripts": {
...
"build": "vitepress build --build",
...
},
3) Déterminez si le mode d'exécution actuel est dev ou build dans docs/.vitepress/config.ts et spécifiez la valeur de base en fonction du résultat du jugement :
import minimist from 'minimist'
....
const argv = minimist(process.argv.slice(2))
const build = argv.build || false
export default defineConfig({
...
base: build ? '/yyg-demo-ui/' : '/',
...
})
De cette façon, nous pouvons spécifier différents chemins de contexte selon différents modes d'exécution.
Soumettez le code dans le répertoire racine du projet et réexécutez pnpm run docs:deploy . Attendez que le document de la bibliothèque de composants à être empaqueté et publié soit affiché comme Publié . Actualisez ensuite le navigateur pour afficher la page du document de la bibliothèque de composants. Si l'affichage est toujours anormal, cela peut être dû à des problèmes de réseau et de cache. Veuillez actualiser violemment dans quelques minutes et réessayer :
À ce stade, nous avons terminé l'open source de la bibliothèque de composants, l'avons soumis à GitHub et utilisé les pages GitHub pour accéder à la documentation de la bibliothèque de composants. Il existe de nombreuses opérations avancées sur GitHub, telles que l'utilisation de GitHub pour CI/CD, Action runner, etc. Cela peut nous aider à réaliser de nombreuses opérations plus automatiquement. Vous pouvez en apprendre davantage à ce sujet.
Merci d'avoir lu cet article. Si cet article vous a donné un peu d'aide ou d'inspiration, merci de me soutenir trois fois pour en savoir plus sur le compte Gongwei "Brother Elegant Programmer".