Información de fondo
Mi equipo tiene una aplicación React JS que se ha vuelto muy grande con el tiempo, por lo que estamos buscando dividirla en partes más pequeñas. Actualmente, estamos considerando cargar esas piezas usando etiquetas <script> . Estas piezas pueden ser creadas/gestionadas por otros equipos.
Nuestra aplicación principal (shell, contenedor) utiliza una variedad de bibliotecas de terceros. Muchas de estas bibliotecas crean objetos en window (como window.errorlibrary , window.logginglibrary , etc.). Además, capturamos excepciones no controladas mediante window.onerror .
Es probable que otros equipos quieran usar muchas de las mismas bibliotecas de terceros que estamos usando. Además, es posible que también deseen realizar su propio control de errores en las excepciones no controladas de su código.
El problema
Cuando carga JS usando una etiqueta <script> , ese JS cargado ahora tiene el mismo objeto de window que la aplicación principal (shell, contenedor). Esto significa que si la aplicación principal usa window.errorlibrary y el JS cargado tiene una window.errorlibrary , el JS cargado sobrescribirá la window.errorlibrary original. Lo mismo sucede con el manejo de errores definido usando window.onerror .
También probé la federación del módulo webpack 5 y ocurre el mismo problema (JS comparte el objeto de la window ).
Información adicional
Soy consciente de que usar <iframe> s en lugar de <script> s solucionaría este problema (ya que el JS cargado se ejecutaría en su propia window ). También soy consciente de que podríamos coordinarnos para nombrar cualquier objeto que adjuntemos a la window de forma única, pero eso no funcionará necesariamente para bibliotecas de terceros o para el manejo de errores con window.onerror .
En última instancia, es posible que solo necesitemos usar <iframe> s, pero me gustaría ver si hay otra opción.
Creo que la única forma de lograr esto es mediante el espacio de nombres de sus módulos. Si esta descripción te funciona:
En muchos lenguajes de programación, el espacio de nombres es una técnica empleada para evitar colisiones con otros objetos o variables en el espacio de nombres global. También son extremadamente útiles para ayudar a organizar bloques de funcionalidad en su aplicación en grupos fácilmente manejables que se pueden identificar de forma única.
y es fácilmente alcanzable, entonces optaría por esto. PD Aquí hay un enlace a un artículo realmente detallado sobre los patrones de espacios de nombres: https://addyosmani.com/blog/essential-js-namespacing/