Comparta la base de código utilizando el módulo Sdk común en la aplicación Reactjs de la aplicación create react

react-native babel

Question

Quiero iniciar una nueva aplicación que tendrá interfaces web y reactivas.

Decidí mover todo el código de negocio, no dependiente del medio ambiente, a un tercer paquete -aka sdk- que puedo compartir entre reaccionar y reaccionar de forma nativa.

Así que mi proyecto ahora tiene 4 módulos.

1. Web - creada con cra
2. Sdk - principalmente redux + redux saga + reaccionar contenedores + Hoc''s
3. Móvil -activo nativo

4. Servidor - nodejs express api.

   • Todo web, móvil y servidor dependerá del módulo Sdk.
   • El módulo sdk dependerá del módulo del servidor, principalmente para importar simulacros e interfaces de datos.

¿Hay alguna forma estándar de lograr tal estructura?

Lo más probable es que me encantaría

• use los espacios de trabajo de Yarn para agrupar todos los módulos de nodo en una carpeta para evitar la reinstalación de paquetes en cada proyecto
• Estaré trabajando en los 4 proyectos al mismo tiempo, así que necesito hotreload para estar al tanto de esto.

** desafíos que estoy enfrentando **

1. Cra no transpila el código fuera de la carpeta src, así que aunque el proyecto web se actualiza qhen hago cambios en sdk. No puede entender el código es6.
2. Jest tampoco entiende es6 de node_modules

¿Cómo puedo evitar el paso de reconstrucción mientras trabajo en módulos sdk y web simultáneamente?

Answer 1

Podrías probar una estructura de proyecto como esta:

| package.json
|- node_modules
|- Web
| package.json
|- SDK
| package.json
|- Mobile
| package.json
|- Server
| package.json

Luego, podría instalar todo dentro de la carpeta raíz y establecer la variable env NODE_PATH:

export NODE_PATH=''yourdir''/node_modules

Answer 2

El espacio de trabajo de hilos parece un buen enfoque para la estructura del proyecto que está pensando.

Puedes tener un directorio de packages donde puedes agregar tus proyectos:

/packages
- web
- sdk
- native

Ahora puede usar babel para observar los cambios de código para cada uno de sus paquetes utilizando babel -w y el espacio de trabajo de hilados se encargará de vincularlos.

Si los observadores de babel se están ejecutando, cualquier cambio que realice en el SDK se reflejará tanto en la web como en native paquetes native . También puede agrupar todos estos elementos juntos de forma concurrently para encender a los observadores con un solo comando.

Soy coautor de una biblioteca de código abierto en la que seguimos una estructura similar que puede consultar here . La diferencia en este proyecto es que nuestra lógica de redux está en un repositorio separado.

Para que funcione jest, puede agregar un .babelrc test a su archivo .babelrc que transpile los módulos. Por lo tanto, puede agregar dos entornos diferentes, como la test que se transpira a los módulos comunes y un entorno de ES que mantiene los módulos ES para que sus usuarios puedan aprovechar la sacudida de árboles. Ejemplo de configuración

Espero que esto te dé un buen punto de partida :)