es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo utilizar Turborepo en una aplicación existente de React creada con Create React App para convertirla en un monorepo.

Cómo utilizar Turborepo en una aplicación existente de React creada con Create React App para convertirla en un monorepo.

29 Jul, 2023 Programación

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.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para comenzar con Turborepo, puedes seguir los siguientes pasos:

    1. Instala Turborepo de forma global ejecutando el siguiente comando en tu terminal:
    npm install -g turborepo
    1. Crea un nuevo repositorio o utiliza uno existente y entra al directorio del proyecto en tu terminal.

    2. Inicializa el repositorio ejecutando turborepo init. Esto creará un directorio .turbo en el directorio raíz de tu proyecto.

    3. Crea tus archivos package.json y package-lock.json en la raíz de tu proyecto. Estos archivos contendrán información sobre tu proyecto y sus dependencias.

    4. 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.

    5. En cada directorio de paquete, agrega un archivo package.json que especifique el nombre, versión y dependencias del paquete.

    6. 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:

    turborepo install @projectname/components @projectname/hooks @projectname/providers @projectname/styles
    1. En el código de cada aplicación, ahora puedes importar tus dependencias compartidas de la siguiente manera:
    import { useExampleHook } from '@projectname/hooks'
import { ExampleComponent } from '@projectname/components'

    ¡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.

Comments are closed.