Por lo general, todos acumulan una gran cantidad de componentes comerciales en el desarrollo diario, ya sea que hagan sus propias ruedas o un empaque secundario basado en una excelente biblioteca de componentes. Con el tiempo, con más y más componentes, administrar y compartir estos componentes comerciales puede convertirse en una carga. Este artículo presentará Bit para proporcionar una nueva solución a este escenario.
¿Qué es el bit?
Bit aprovecha los componentes para hacerlos no solo reutilizables dentro de las aplicaciones, sino que también proporciona un ecosistema donde los componentes se pueden compartir entre aplicaciones y entre repositorios.
Bit es una herramienta que puede compartir y sincronizar componentes en diferentes proyectos.
Bit simplifica el proceso de colaboración en los componentes de la interfaz de usuario, los miembros del equipo pueden compartir, mantener y sincronizar componentes aislados de diferentes proyectos.
¿Cómo funciona Bit?
Este artículo presentará tres módulos: composición de componentes, ciclo de vida de los componentes, flujo de trabajo de Bit para presentar la diferencia entre Bit y la gestión tradicional de la biblioteca de componentes.
Componentes
Para cada componente, Bit almacena tres elementos.
Código fuente (incluyendo prueba y documentación)
El contenido del componente no es solo el código fuente en sí, sino también otros archivos relacionados, como archivos de estilo, activos (imágenes, fuentes), código de prueba y documentación.
Gráfico de dependencia
Al agregar una fuente a un componente de Bit, Bit analiza todas las dependencias que contiene (es decir, importa y requiere declaraciones en el código)
Los gráficos de dependencia hacen que los componentes sean independientes y permiten que los componentes se muevan en un proyecto sin perder ninguna referencia.
Elemento de configuración
Compilador, bit proporciona el compilador bit.envs/compilers/[email protected]
Tester, una extensión proporcionada por bit, se utiliza para ejecutar la prueba asociada con el componente y devolver el estado.
El código fuente es un poco similar a la parte del código fuente de la biblioteca de componentes original. El gráfico de dependencia es similar al mapa generado por webpack durante el análisis de la fase de dependencia de importación, y los elementos de configuración son similares a webpack.config.js. Se puede ver que la razón por la cual Bit es tan conveniente para completar el empaque del componente es que parte de la razón es que Bit nos ayudó a empaquetar y compilar la biblioteca de componentes.
Componente ciclo de vida Componente de
producción El componente de
producción tiene tres acciones: seguimiento, versión, exportación.
Seguimiento: especifique los archivos componentes en el espacio de trabajo.
Versión: la versión marcada bloqueará el contenido y los metadatos de los archivos de esa versión. Si el componente tiene un compilador, Bit construye el componente y lo bloquea (piense en él como git commit y npm release al mismo tiempo).
El comando Exportar: exportar creará una ID única para el componente. El ID único es el nombre del alcance remoto y el nombre del componente local. El nombre del alcance remoto puede incluir cualquier espacio de nombre (username.collection? .Namespace). bit.dev/yangzhedi/t ...
El componente del consumidor
puede ser utilizado por otros espacios de trabajo siempre que se cargue en un servidor remoto. La forma de usar componentes es mediante la instalación o importación.
Instalar: Bit agregará el componente a la carpeta node_modules como un paquete NPM normal. Al instalar un componente (bit install / npm install / yarn add), el componente se agregará a package.json, señalando la versión instalada: "@ bit / yangzhedi.test.list": "0.0.1". El código de los componentes instalados no se modifica.
Importar lista desde '@ bit / yangzhedi.test.list';
Importar: Bit agregará el componente a la carpeta del componente del espacio de trabajo y realizará un seguimiento de su modificación. Al importar, puede ver que package.json apunta a un archivo local: "@ bit / yangzhedi.test.list": "file: ./ components / list",
Rastree modificaciones de código y puede exportarlas a nuevas versiones. Expulsar: si exporta una nueva versión, puede volver a los componentes instalados. En este caso, package.json se actualizará nuevamente a "@ bit / yangzhedi.test.list": "0.0.2"
Bit workflow
Ad-hoc Sharing (uso compartido temporal)
_ | _
Este flujo de trabajo es adecuado para:
Hay varios productos con bibliotecas de componentes de IU.
UI / UX debe ser coherente entre proyectos.
No hay tiempo / capacidad para formar un equipo dedicado para mantener los componentes.
Beneficios
No es necesario pasar mucho tiempo creando y manteniendo bibliotecas compartidas para componentes de la interfaz de usuario, compartiendo componentes ya desarrollados en proyectos existentes.
Utilice bit.dev como portal de descubrimiento para recopilar todos los componentes del portal, incluidas demostraciones y documentación.
Puede cambiar el código del componente en cualquier proyecto, puede mantener las modificaciones locales de los componentes en el proyecto y aun así combinarse con las actualizaciones entrantes.
Los componentes se pueden instalar usando npm / yarn, por lo que son adecuados para el flujo de trabajo normal de los desarrolladores de proyectos.
Riesgo
Estandarizar el proceso de exportación de componentes.
Biblioteca centralizada
Este flujo de trabajo es adecuado para:
Repositorio centralizado que necesita compartir componentes de UI
Un equipo dedicado para administrar componentes de UI compartidos
Existen múltiples proyectos que utilizan componentes compartidos.
Beneficios
Para productores
Bit empaqueta automáticamente cada componente con una granularidad más alta sin aumentar la sobrecarga de mantener un paquete separado, y realiza automáticamente el control de versión de los componentes de acuerdo con los cambios en las dependencias de los componentes
Construir un componente localmente sin un contexto de proyecto acorta el ciclo de retroalimentación sobre cómo se llama al componente en otros proyectos.
Publique el componente en bit.dev para que sea visible para todos los equipos, aumentando así la tasa de adopción del componente. Bit ayuda a controlar quién está cambiando el componente.
Para los consumidores
Obtener los componentes discretos más pequeños necesarios para cada proyecto es: Reducir el tamaño del paquete de la aplicación.
Solo puede introducir los componentes que necesitan. Reduzca el volumen de empaque final y acorte el tiempo de construcción.
Una biblioteca de componentes de llamada más precisa puede mejorar la estabilidad del proyecto.
Riesgo
Si hay un equipo dedicado a mantener una biblioteca de componentes unificada, la granularidad es demasiado fina y se convertirá en una carga
¿Qué es diferente de npm?
Bit automatiza el empaquetado de código basado en el análisis de código.
Bit puede acceder al paquete (importación de bit) sin salir del contexto del proyecto.
Para los productores, no necesita copiar los componentes por separado, puede cargarlos directamente
Para los consumidores, si desea modificar el componente, no necesita la biblioteca de componentes de clonación, pero puede modificarla directamente en el proyecto.
Bit puede usar el código del componente en cualquier proyecto y luego realizar cambios directamente en él.
Arriba, este artículo presenta principalmente el uso de bit cli, bit también proporciona un sitio web de plataforma similar a npm.org: bit.dev, y también puede ver directamente el estilo del componente y el método de llamada en bit.dev, incluso No tiene que escribir documentos.
