Cómo utilizar Turborepo en una aplicación existente de React creada con Create React App para convertirla en un monorepo.
Tengo un proyecto divertido realizado con create react app. Quiero convertir la misma aplicación en una extensión para navegador. Esta idea me obliga a convertir el proyecto en un monorepo. Porque en ambas aplicaciones, usaré los mismos componentes, hooks, proveedores, etc.
No quiero usar Lerna ni Yarn workspaces. Y, este será mi primer monorepo. Quiero empezar con Turborepo. Sin embargo, no puedo imaginar cómo hacerlo funcionar de manera adecuada.
La estructura de carpetas que busco se muestra a continuación:
- apps/
- app1/
- app2/
- packages/
- components/
- hooks/
- providers/
- styles/
- package.json
- package-lock.json
Importaré las dependencias del monorepo desde la carpeta packages hacia las apps existentes en la carpeta apps.
Por ejemplo:
import { useExampleHook } from '@projectname/hooks'
import { ExampleComponent } from '@projectname/components'
Si tienes otra solución además de Turborepo, no dudes en hacérmelo saber. NPM workspaces también es una solución aceptable. Sin embargo, Turborepo tiene prioridad debido a su mejor rendimiento.
Gracias de antemano por tu tiempo y respuesta.
davy.ai
Para comenzar con Turborepo, puedes seguir los siguientes pasos:
Inicializa el repositorio ejecutando
turborepo init
. Esto creará un directorio.turbo
en el directorio raíz de tu proyecto.Crea tus archivos
package.json
ypackage-lock.json
en la raíz de tu proyecto. Estos archivos contendrán información sobre tu proyecto y sus dependencias.Crea un directorio
packages
en la raíz de tu proyecto para almacenar tus componentes compartidos, hooks, proveedores y estilos. Dentro de este directorio, crea un directorio para cada uno de estos paquetes.En cada directorio de paquete, agrega un archivo
package.json
que especifique el nombre, versión y dependencias del paquete.Importa tus dependencias compartidas desde el directorio
packages
hacia los directorios de tus aplicaciones ejecutando el siguiente comando en el directorio de cada aplicación:¡Eso es todo! Ahora deberías tener un monorepo funcional configurado para tu proyecto utilizando Turborepo. Si encuentras algún problema, asegúrate de consultar la documentación de Turborepo para obtener más información.