Estoy tratando de crear el ejemplo de prueba de concepto de federación de módulo de paquete web más básico.
Configuración del paquete web en la aplicación host:
... plugins: [ new ModuleFederationPlugin({ name: "hostApp", remotes: { libApp: `libApp@http://localhost:3000/libApp`, }, }), ], ...Configuración del paquete web en la aplicación de dependencia:
... plugins: [ new ModuleFederationPlugin({ name: "libApp", filename: "libApp.js", exposes: { "./moduleA": "./src/moduleA", "./moduleB": "./src/moduleB", } }) ], ...Aquí está el repositorio de reproducción.
¿Qué tiene de malo esta configuración?
Además, ¿es posible configurar la aplicación de dependencia para exportar un solo archivo js con todos los módulos expuestos incluidos (como un solo módulo de paquete web)?
Puede solucionar esto creando un nuevo archivo "bootstrap.js" en hostApp.
// src/bootstrap.js console.log('host app test') import moduleA from 'libApp/moduleA' import moduleB from 'libApp/moduleB' const el = document.getElementById('hostAppContainer') el.innerHTML = 'changedContent: ' + moduleA + moduleBy luego cambia tu index.js a
// src/index.js import("./bootstrap");Esto fue causado por tratar de hacer una federación de módulos en el punto de entrada inicial, lo cual no le gusta que hagas al paquete web.
Veo varias cosas.
remotes va en las aplicaciones dependientes como un enlace a la aplicación host.filename dentro de la configuración de la aplicación host para el acceso remoto.src y no dentro src/app .