Introducción a Bit.dev (Bit Harmony) para gestionar nuestros componentes de React Native
Bit.dev es una infraestructura para administrar componentes de diferentes frameworks. Esto es muy interesante a la hora de reutilizar componentes entre diferentes proyectos, documentarlos, colaborar en su desarrollo y controlar las versiones de estos componentes.
En esta guía, le mostraremos cómo instalar y configurar Bit Harmony para componentes React Native. No obstante, la guía para reutilizar, construir, y gestionar componentes de React Native mediante Bit Harmony, se puede encontrar en el siguiente enlace:
Instalación
Lo primero que debe hacer es instalar Bit globalmente en la máquina donde se han implementado o se implementarán los componentes. Para hacerlo, BVM (Bits Version Manager) debe instalarse usando NPM, y luego Bit Harmony se instalará a través de BVM.
1 — Instalar NPM (si ya lo tiene instalado puede omitir este paso)
Puede verificar si NPM está instalado ejecutando el siguiente comando:
npm -v
Si no está instalado, puede obtenerlo instalando NodeJS usando Descargar | Instaladores de Node.js (nodejs.org) en el caso de Windows y MacOS, mientras que en el caso de las distribuciones de Linux recomiendo instalarlo con el administrador de paquetes, como se indica en esta guía. Instalación de Node.js a través del administrador de paquetes | Node.js (nodejs.org)
2 — Instalar BVM y Bit
Si NPM se ha instalado correctamente, para instalar BVM simplemente ejecute el siguiente comando:
npm i -g @teambit/bvm
Una vez que se completa la instalación, BVM se puede usar para instalar Bit usando el comando:
install bvm
Si el comando bvm no funciona porque no se encuentra o no está disponible, entonces, dependiendo de la plataforma, se puede resolver ejecutando uno de los siguientes comandos:
Ventanas:
setx path "%path%;%LocalAppData%\.bvm"
MacOS / Linux:
echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc
Después de ejecutarlo, debe reiniciar el terminal o PowerShell.
Este comando agrega la variable de entorno para poder ejecutarlo desde el terminal o PowerShell.
Una vez finalizada la instalación, puede comprobar que Bit se ha instalado correctamente ejecutando el comando:
bvm version
Debería mostrar algo similar a esto
current (used) bvm version: 0.0.24
latest available bvm version: 0.0.24current (used) bit version: 0.0.453
latest installed bit version: 0.0.453
latest available bit version: 0.0.453
Por último, vamos a comprobar que el comando bit funciona correctamente, para ello simplemente tenemos que ejecutar:
bit
Si todo va bien, mostrará una lista de todos los comandos disponibles. De lo contrario, si no encuentra el comando, es posible que la variable de entorno no se haya configurado correctamente. Para solucionar este problema, dependiendo de la plataforma, debes ejecutar uno de los siguientes comandos
Ventanas:
setx path "%path%;%LocalAppData%\.bvm"
MacOS / Linux:
echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc
Después de ejecutarlo, debe reiniciar el terminal o PowerShell.
En realidad, esta es la misma solución descrita anteriormente para cuando no se encuentra el comando bvm.
Crear una cuenta y una colección
Antes de comenzar con la configuración es recomendable crear un usuario en bit.dev y, con este usuario, crear una colección donde poder cargar, administrar y compartir los componentes. De lo contrario, todo el trabajo que sigue se haría localmente, sin aprovechar algunos de los beneficios que brinda esta plataforma.
Luego de crear la cuenta en bit.dev , podemos crear una colección donde subir los componentes que decidamos exportar a la plataforma.
En mi caso simplemente crearé una colección personal, con el nombre “test”, en la versión “Harmony”, y con acceso privado.
Es relevante el nombre de la colección y si es un proyecto de equipo o personal, ya que posteriormente se requiere establecer el alcance de los componentes, su identificador y la forma de acceder a ellos.
Una vez hecho esto, tenemos que iniciar sesión en la máquina donde tenemos instalado bit ejecutando el siguiente comando:
bit login
Este comando abrirá una ventana en el navegador para iniciar sesión con la cuenta que acabamos de crear.
Configuración
La inicialización y configuración del espacio de trabajo de bits se realiza de forma similar en el caso de crear un nuevo proyecto desde cero, y en el caso de utilizar uno existente con componentes previamente implementados.
1 — Crear un nuevo proyecto React Native
En este paso, crearemos un nuevo proyecto desde cero, para que no tenga que hacerlo, y debe omitirlo si tiene la intención de inicializar y configurar el espacio de trabajo de bits para proyectos existentes de React Native.
Primero ubicamos la carpeta donde se creará la carpeta del proyecto.
En mi caso:
cd C:\Users\brand\playground
En esta carpeta ejecutamos el comando:
npx react-native init <Nombre del proyecto>
Esto creará una carpeta con el mismo nombre que el proyecto, que contendrá los archivos del proyecto y el código de la aplicación.
(Opcional) En caso de que desee crear el proyecto para usar TypeScript, en lugar del comando anterior debe ejecutar el siguiente comando:
npx react-native init <Nombre del proyecto> --template react-native-template-typescript
Como ejemplo, crearé un proyecto de prueba de TypeScript usando el siguiente comando:
npx react-native init test --template react-native-template-typescript
Usaré este mismo ejemplo para comprender mejor algunos de los comandos que se explicarán a continuación.
2 — Inicializar el espacio de trabajo de Bit
En este paso vamos a inicializar el espacio de trabajo de Bit del proyecto, para ello ubicamos dentro de la carpeta del proyecto React Native.
Para el ejemplo creado anteriormente sería:
cd C:\Users\brand\playground\test
Una vez dentro de esta carpeta ejecutaremos el comando:
bit init --harmony
Este comando crea los siguientes archivos dentro del proyecto:
workspace.jsonc
- Este es el archivo de configuración del espacio de trabajo donde se establecen las políticas del espacio de trabajo y sus componentes..bitmap
- Este es un archivo generado automáticamente para mapear los componentes versionados y su ubicación física..git/bit
Archivos de gestión de versiones del espacio de trabajo.
3 — Configuración del espacio de trabajo de Bit
Después de la inicialización, lo único que queda por hacer es configurar el espacio de trabajo para usar el aspecto y la sensación de React Native y el alcance que se ha creado previamente.
Para hacer esto, modifica el archivo workspace.jsonc
en la parte "teambit.workspace/workspace"
donde dice "name": "my-workspace-name"
cambiar “my-workspace-name” al nombre que quieres darle al espacio de trabajo, en mi ejemplo pondré test y el resultado será el siguiente "name": "test"
Un poco más abajo en "teambit.workspace/workspace"
donde dice "defaultScope": "my-scope"
cambiar “my-scope” al nombre del alcance donde se van a agregar los componentes, en este caso usaremos el creado previamente. Para hacerlo, debe configurarse de la siguiente manera:
"defaultScope": "<Nombre de usuario | Nombre del equipo>. <Nombre de la colección>"
De esta forma, el ejemplo creado anteriormente se vería así:
"defaultScope": "brandres.test"
Ya que recordemos que la colección fue creada como personal y con el nombre de “prueba”.
Finalmente tenemos que reemplazar esto:
Con este:
Se puede observar que en “teambit.dependencies/dependency-resolver” en la política de peerDependencies hay que establecer la versión de react que se especifica en package.json como una dependencia de todos los componentes, ya que esta versión es la que tenemos instalada en el proyecto, y es con la que se ha desarrollado el componente. Especificar esto es muy importante ya que por defecto Bit utiliza otras políticas de dependencias que pueden dar problemas a la hora de instalar el componente en otros proyectos mediante npm ≥ 7
Traducción realizada con la versión gratuita del traductor www.DeepL.com/Translator
Luego, se debe ejecutar el siguiente comando:
bit install
Este comando se usa para instalar las dependencias y los paquetes necesarios para el proyecto. Finalmente iniciaríamos el servidor de desarrollo con los comandos:
bit compile
bit start
Se puede acceder a este servidor a través de un navegador ingresando http: // localhost: 3000 .
Aquí podemos ver y administrar diferentes propiedades de los componentes que se han versionado localmente en el espacio de trabajo.
Espero que esta guía os haya sido de utilidad, seguiré escribiendo tutoriales acerca de los aspectos mas relevantes de Bit, y cualquier duda o sugerencia me la podéis comentar.
Muchas gracias.
Como usar Bit Harmony para la gestión de componentes React Native: