Los 11 artículos anteriores se utilizaron para compartir el desarrollo, la construcción y el lanzamiento del proyecto de biblioteca de componentes del conjunto completo de cuatro piezas (biblioteca de componentes, documentación, ejemplo, cli) basado en vue3 y Monorepo. Este artículo es una extensión de estos 11 artículos: cómo publicar en GitHub y cómo usar rápidamente GitHub para publicar documentos de biblioteca de componentes. De esta manera, la serie "Component Library Framework" de Elegant Brother forma un circuito cerrado: desde el desarrollo hasta el código abierto. Antes de comenzar este artículo, registre una cuenta de GitHub e inicie sesión.
1 ConfirmarGitHub
1.1 Crear repositorio
Después de iniciar sesión en GitHub, haga clic en "+" - "Nuevo repositorio" en la esquina superior derecha para crear un repositorio, como se muestra a continuación:
Después de ingresar a la página de creación de almacén, complete el nombre del almacén (con respecto al nombre del almacén, Elegant Brother está acostumbrado a usar el nombre del proyecto local) y haga clic en el botón "Crear repositorio" en la parte inferior de la página:
Una vez creado el almacén, ingresará a la página del almacén, donde se indica claramente cómo enviar el código local al almacén de GitHub.
1.2 Código push
Ingrese el directorio raíz del proyecto en el comando y ejecute los siguientes comandos para enviar el código al repositorio de GitHub creado anteriormente.
- Inicialice el repositorio Git local:
git init
- Agregue archivos para enviar a git:
git add .
- Envíe el código al repositorio local:
git commit -m 'feat: 初始化组件库工程'
- Configure la rama maestra:
git branch -M main
- Agregue un almacén remoto. Esta línea de comando se puede ver en la página anterior después de que el almacén se haya creado correctamente:
git remote add origin [email protected]:HeroCloudy/yyg-demo-ui.git
- Envíe el código al repositorio de GitHub:
git push -u origin main
Esto enviará el código local a GitHub. Actualice la página del almacén, como se muestra a continuación:
Si hay modificaciones posteriores en el código, primero use git commit para enviarlo al almacén local y luego use el comando git push para enviarlo a GitHub.
2 Publicar documentación de la biblioteca de componentes
El código se ha publicado en GitHub. A continuación, esperamos hacer un uso completo de los recursos de GitHub y publicar el documento empaquetado de la biblioteca de componentes en GitHub para que los usuarios puedan acceder directamente al documento.
GitHub proporciona páginas de capacidad , a través de las cuales podemos publicar recursos HTML estáticos en GitHub y admitir el acceso a páginas web en forma de HTTP.
La idea de implementación es la siguiente:
- Crear documentación de biblioteca de componentes;
- Envíe y envíe el documento de la biblioteca de componentes creados ( ./docs/.vitepress/dist ) a otra rama del almacén;
- Configure las páginas de GitHub para que apunten a la nueva rama de arriba.
2.1 Documentación de la biblioteca de componentes de compilación
Anteriormente configuramos el comando de compilación del documento de la biblioteca de componentes:
pnpm run docs:build
Espere a que se complete la compilación y verá que el contenido empaquetado se encuentra en el directorio ./docs/.vitepress/dist .
2.2 Empujar a la nueva rama de github
Una vez creado el documento, debe enviarse a una nueva rama. Si se hace manualmente, será más engorroso. Brother Yaya recomienda usar una herramienta npm para ayudarnos a completar esta operación: gh-pages .
Instale gh-pages en el directorio raíz del proyecto :
pnpm install gh-pages -D -w
A continuación, puede usar gh-pages para enviar el directorio especificado a una nueva rama de github (rama gh_pages):
gh-pages -d docs/.vitepress/dist
Después de un tiempo, la consola indicará Publicado , lo que significa que el lanzamiento se realizó correctamente. En este momento, puede mirar las sucursales del almacén:
Primero ejecute git fetch para obtener la información más reciente de la rama en GitHub y luego ejecute git branch -a para ver todas las ramas locales y remotas. El resultado es el siguiente:
Puedes ver que hay una rama remota adicional llamada gh-pages . También podemos ver esta rama en la página de inicio del almacén de GitHub:
En resumen, la operación anterior implica dos pasos:
- Documentación de la biblioteca de componentes del paquete
- Envíe el contenido empaquetado del documento a la rama gh-pages.
Podemos agregar un nuevo script en package.json en el directorio raíz del proyecto para combinar las dos operaciones anteriores:
"scripts": {
...
"docs:deploy": "pnpm run docs:build && gh-pages -d docs/.vitepress/dist",
...
},
Cuando modifique posteriormente el contenido del documento de la biblioteca de componentes, solo necesita ejecutar pnpm run docs:deploy .
2.3 Configurar páginas de GitHub
1) Haga clic en el botón Configuración en la página de inicio del almacén para ingresar a la página de configuración del almacén
2) Haga clic en páginas en el lado izquierdo de la página de configuración para ingresar a la página de Páginas de GitHub. En esta página, puede ver que la rama gh-pages está configurada para nosotros de forma predeterminada y también nos dice la dirección de acceso:
3) Cuando acceda a la ruta en el navegador, encontrará que la visualización es anormal, esto se debe a que la ruta de contexto (BaseUrl) configurada en el módulo de documento de la biblioteca de componentes es diferente de la ruta de contexto real.
2.4 La ruta del contexto del documento de la biblioteca de componentes diferencia el entorno
Finalmente, necesitamos modificar la ruta de contexto de la biblioteca de componentes. Si es un proceso simple, simplemente modifique el valor del atributo base del objeto exportado en docs/.vitepress/config.ts . La ruta de contexto en las páginas de github es: /yyg-demo-ui/ , por lo que solo necesita cambiar base: '/' a base: '/yyg-demo-ui/' . Pero en este caso, la ruta de acceso también debe contener este contexto http://localhost:3100/yyg-demo-ui cuando se desarrolla localmente .
Entonces, ¿cómo utilizar / para desarrollo local y /yyg-demo-ui/ para embalaje y construcción ? Solo se necesitan los siguientes tres pasos para lograrlo:
1) Agregue el mínimo de dependencia de desarrollo en el módulo de documentos , que se utiliza para extraer parámetros en el comando:
pnpm install minimist -D
2) Modifique el comando de compilación en el módulo de documentos y agregue un parámetro de compilación al comando:
"scripts": {
...
"build": "vitepress build --build",
...
},
3) Determine si el modo de ejecución actual es dev o build en docs/.vitepress/config.ts y especifique el valor de base según el resultado del juicio :
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 esta manera, podemos especificar diferentes rutas de contexto según los diferentes modos de ejecución.
Envíe el código en el directorio raíz del proyecto y vuelva a ejecutar pnpm run docs:deploy . Espere a que el documento de la biblioteca de componentes se empaquete y publique para que se muestre como Publicado . Luego actualice el navegador para mostrar la página del documento de la biblioteca de componentes. Si la visualización sigue siendo anormal, puede deberse a problemas de red y de caché. Actualice violentamente en unos minutos y vuelva a intentarlo:
En este punto, completamos el código abierto de la biblioteca de componentes, lo enviamos a GitHub y utilizamos GitHub Pages para acceder a la documentación de la biblioteca de componentes. Hay muchas operaciones avanzadas en GitHub, como el uso de GitHub para CI/CD, Action runner, etc. Puede ayudarnos a realizar muchas operaciones de forma más automática. Puede obtener más información al respecto.
Gracias por leer este artículo. Si este artículo le ha brindado un poco de ayuda o inspiración, apóyeme tres veces para obtener más información sobre la cuenta de Gongwei "Brother Elegant Programmer".