¿Alguna herramienta de compilación admite esta estrategia de carga, como webpack o rollup.js?
Cree cada dependencia en un solo paquete, y cuando cargue estas dependencias, primero búsquelo en la ventana ['paquete'], si existe, utilícelo. De lo contrario, paquete de dependencias de carga dinámica para usar.
Dicha dependencia de aplicaciones es React, ReactDOM y UiLib.
El resultado construido es:
React -> a.js ReactDOM -> b.js UiLib -> c.js my code -> d.jssi window.React existe pero window.ReactDOM y window.UiLib no existen. d.js debe cargar dinámicamente b.js y c.js y usar window.React.
Sé que puedo configurar React para elementos externos, pero esta es una microaplicación utilizada en muchas aplicaciones diferentes, no estoy seguro de qué paquetes existen en cada global.
No. No es posible directamente. Para un empaquetador, es una elección binaria entre agrupar o no agrupar.
¿Por qué? Cuando un empaquetador encuentra una biblioteca a través de declaraciones de importación como - import React from 'react' , necesita saber qué objeto global debe sustituir cada vez que encuentre un paquete de react en todo el gráfico de dependencia de la aplicación. Esto debe ocurrir en tiempo de compilación. Además, cargar una biblioteca con decisión dinámica en tiempo de ejecución significa que está introduciendo un comportamiento asíncrono en su código que sus componentes o aplicación no pueden manejar fácilmente.
Hay dos factores de forma: una biblioteca y una aplicación. En lo que respecta a la biblioteca, esta es la única forma de enseñar bundler (ya sea empaquetarlo o dejarlo a través externals ).
A nivel de aplicación, puede escribir su propio código para lograr parcialmente lo que busca con la ayuda de CDN. Para esto, usa elementos externos y le dice a Webpack, por ejemplo, que react estará disponible como objeto React global en el espacio de nombres de la window .
Ahora, antes de que su biblioteca se consuma, debe agregar un código dinámico donde verificar la presencia del objeto React .
function async initialize() { if (!window.React) { const React = await import(/* webpackIgnore: true */ 'https://unpkg.com/react@18/umd/react.development.js') window.React = React; initializeMicroapp(); } else { initializeMicroapp(); return Promise.resolve(); } } Su función de initialize para microaplicación es asíncrona y devuelve una promesa. Este suele ser el patrón para seguir adelante con shell + micro-frontends .
En una nota al margen, puede usar el enfoque de federación de módulos que en realidad está destinado a resolver un caso de uso exactamente similar. Con la federación de módulos, puede enseñarle a Webpack que si el host/shell proporciona una biblioteca, entonces Webpack simplemente debe ignorar su copia empaquetada de esa biblioteca mientras sirve solo otro código necesario. Sin embargo, aconsejo precaución ya que es un patrón muy específico y no de facto ni de jure en este punto. Se recomienda cuando tiene una escala suficiente y muchos equipos independientes que trabajan en el mismo espacio de producto.