Admito un código base heredado relativamente complejo, pero estoy buscando modernizarlo un poco incorporando Webpack para que tengamos capacidades de importación y exportación en JS.
El problema que tengo es que usamos un objeto global llamado App donde definimos y agregamos diferentes propiedades dependiendo de la página. Entonces, por ejemplo, tenemos el siguiente archivo donde instanciamos la aplicación (cargada en todas las páginas):
aplicación.js
const App = (() => { const obj = { Lib: {}, Util: {}, // etc } return obj; })();Luego, en otro archivo, agregamos a App.Lib solo para la página específica que lo necesita:
lazyload.js
App.Lib.Lazyload = (() => { // lazyload logic })();Simplemente concatenamos los archivos durante el proceso de agrupación, pero obviamente esto no es ideal ya que ninguno de los archivos tiene conocimiento de lo que sucede fuera de él.
La exportación solo parece funcionar para el objeto de nivel superior (donde se define el objeto), por lo que cualquier cosa que agregue en otro lugar no se puede exportar nuevamente. Por ejemplo, si agrego export default App.Lib.Lazyload; al final de lazyload.js y luego intente importarlo en otro lugar, no importará la propiedad Lazyload.
¿Hay alguna manera de hacer que esto funcione sin una refactorización importante? Si no es así, ¿tiene alguna sugerencia sobre la mejor manera de manejarlo?
No creo que puedas importar Object.properties en JS. Si desea agrupar paquetes específicos (por ejemplo, Lazyload) para paquetes que los necesitan, puede intentar:
//lazyload.js export const LazyLoad = { //lazyload logic }luego en otro lugar...
import {LazyLoad} from 'path/to/lazyload.js'; // assuming App has already been created/instantiated App.Lib.Lazyload = LazyLoad;Uso de la exportación predeterminada ...
//lazyload.js const LazyLoad = {}; export default LazyLoad;después...
import LazyLoad from 'path/to/lazyload.js'; App.Lib.LazyLoad = LazyLoad;Puedes encontrar ayuda con Importaciones y Exportaciones en MDN.