fix: Support empty entry JS in build mode. (#122)

* fix: Support empty entry JS in build mode.

* demo: Support empty entry JS in build mode.

* format: Support empty entry JS in build mode.

Author: zhangHongEn

examples/rust-vite/rust-host/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "dev": "rsbuild dev",
     "build": "rsbuild build",
-    "preview": "npm run build && rsbuild"
+    "preview": "npm run build && rsbuild preview"
   },
   "dependencies": {
     "@module-federation/enhanced": "0.2.5",

examples/rust-vite/vite-remote/src/main.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-//@ts-ignore
-const root = ReactDOM.createRoot(document.getElementById('app'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package.json

@@ -17,6 +17,7 @@
     "dev": "microbundle watch --no-sourcemap --compress=false",
     "build": "rimraf lib && microbundle --no-sourcemap --compress=false",
     "dev-rv": "pnpm -filter 'examples-rust-vite*' run dev",
+    "preview-rv": "pnpm -filter 'examples-rust-vite*' run preview",
     "dev-vv": "pnpm -filter 'examples-vite-vite*' run dev",
     "dev-nv": "pnpm -filter 'examples-nuxt-vite-host' -filter 'examples-vite-vite-remote' run dev",
     "preview-vv": "pnpm -filter 'examples-vite-vite*'  run preview",

src/index.ts

@@ -19,6 +19,7 @@ import {
   initVirtualModules,
   REMOTE_ENTRY_ID,
 } from './virtualModules';
+import { VIRTUAL_EXPOSES } from './virtualModules/virtualExposes';
 
 function federation(mfUserOptions: ModuleFederationOptions): Plugin[] {
   const options = normalizeModuleFederationOptions(mfUserOptions);
@@ -38,6 +39,10 @@ function federation(mfUserOptions: ModuleFederationOptions): Plugin[] {
       entryName: 'hostInit',
       entryPath: getHostAutoInitPath(),
     }),
+    ...addEntry({
+      entryName: 'virtualExposes',
+      entryPath: VIRTUAL_EXPOSES,
+    }),
     pluginProxyRemoteEntry(),
     pluginProxyRemotes(options),
     ...pluginModuleParseEnd((id: string) => {

src/plugins/pluginModuleParseEnd.ts

@@ -3,6 +3,7 @@
  * This plugin allows me to wait until all modules are built, and then expose them together.
  */
 import { Plugin } from 'vite';
+import { VIRTUAL_EXPOSES } from '../virtualModules';
 
 let _resolve: any,
   _reject: any,
@@ -11,6 +12,7 @@ let _resolve: any,
     _reject = reject;
   });
 let parsePromise = promise;
+let exposesParseEnd = false;
 
 const parseStartSet = new Set();
 const parseEndSet = new Set();
@@ -44,8 +46,12 @@ export default function (excludeFn: Function): Plugin[] {
         if (excludeFn(id)) {
           return;
         }
+        if (id === VIRTUAL_EXPOSES) {
+          // When the entry JS file is empty and only contains exposes export code, it’s necessary to wait for the exposes modules to be resolved in order to collect the dependencies being used.
+          exposesParseEnd = true;
+        }
         parseEndSet.add(id);
-        if (parseStartSet.size === parseEndSet.size) {
+        if (exposesParseEnd && parseStartSet.size === parseEndSet.size) {
           _resolve(1);
         }
       },

src/plugins/pluginProxyRemoteEntry.ts

@@ -1,7 +1,12 @@
 import { createFilter } from '@rollup/pluginutils';
 import { Plugin } from 'vite';
 import { getNormalizeModuleFederationOptions } from '../utils/normalizeModuleFederationOptions';
-import { generateRemoteEntry, REMOTE_ENTRY_ID } from '../virtualModules';
+import {
+  generateExposes,
+  generateRemoteEntry,
+  REMOTE_ENTRY_ID,
+  VIRTUAL_EXPOSES,
+} from '../virtualModules';
 import { parsePromise } from './pluginModuleParseEnd';
 
 const filter: (id: string) => boolean = createFilter();
@@ -14,17 +19,26 @@ export default function (): Plugin {
       if (id === REMOTE_ENTRY_ID) {
         return REMOTE_ENTRY_ID;
       }
+      if (id === VIRTUAL_EXPOSES) {
+        return VIRTUAL_EXPOSES;
+      }
     },
     load(id: string) {
       if (id === REMOTE_ENTRY_ID) {
         return parsePromise.then((_) => generateRemoteEntry(getNormalizeModuleFederationOptions()));
       }
+      if (id === VIRTUAL_EXPOSES) {
+        return generateExposes();
+      }
     },
     async transform(code: string, id: string) {
       if (!filter(id)) return;
       if (id.includes(REMOTE_ENTRY_ID)) {
         return parsePromise.then((_) => generateRemoteEntry(getNormalizeModuleFederationOptions()));
       }
+      if (id === VIRTUAL_EXPOSES) {
+        return generateExposes();
+      }
     },
   };
 }

src/virtualModules/index.ts

@@ -29,6 +29,8 @@ export {
   writePreBuildLibPath,
 } from './virtualShared_preBuild';
 
+export { generateExposes, VIRTUAL_EXPOSES } from './virtualExposes';
+
 export { virtualRuntimeInitStatus } from './virtualRuntimeInitStatus';
 
 export function initVirtualModules() {

src/virtualModules/virtualExposes.ts

@@ -0,0 +1,26 @@
+import { getNormalizeModuleFederationOptions } from '../utils/normalizeModuleFederationOptions';
+
+export const VIRTUAL_EXPOSES = 'virtual:mf-exposes';
+export function generateExposes() {
+  const options = getNormalizeModuleFederationOptions();
+  return `
+    export default {
+    ${Object.keys(options.exposes)
+      .map((key) => {
+        return `
+        ${JSON.stringify(key)}: async () => {
+          const importModule = await import(${JSON.stringify(options.exposes[key].import)})
+          const exportModule = {}
+          Object.assign(exportModule, importModule)
+          Object.defineProperty(exportModule, "__esModule", {
+            value: true,
+            enumerable: false
+          })
+          return exportModule
+        }
+      `;
+      })
+      .join(',')}
+  }
+  `;
+}

src/virtualModules/virtualRemoteEntry.ts

@@ -8,6 +8,7 @@ import {
   NormalizedModuleFederationOptions,
 } from '../utils/normalizeModuleFederationOptions';
 import VirtualModule from '../utils/VirtualModule';
+import { VIRTUAL_EXPOSES } from './virtualExposes';
 import { getUsedRemotesMap } from './virtualRemotes';
 import { virtualRuntimeInitStatus } from './virtualRuntimeInitStatus';
 import { getPreBuildLibImportId } from './virtualShared_preBuild';
@@ -114,25 +115,7 @@ export function generateRemoteEntry(options: NormalizedModuleFederationOptions):
   return `
   import {init as runtimeInit, loadRemote} from "@module-federation/runtime";
   ${pluginImportNames.map((item) => item[1]).join('\n')}
-
-  const exposesMap = {
-    ${Object.keys(options.exposes)
-      .map((key) => {
-        return `
-        ${JSON.stringify(key)}: async () => {
-          const importModule = await import(${JSON.stringify(options.exposes[key].import)})
-          const exportModule = {}
-          Object.assign(exportModule, importModule)
-          Object.defineProperty(exportModule, "__esModule", {
-            value: true,
-            enumerable: false
-          })
-          return exportModule
-        }
-      `;
-      })
-      .join(',')}
-  }
+  import exposesMap from "${VIRTUAL_EXPOSES}"
   import {usedShared, usedRemotes} from "${getLocalSharedImportMapPath()}"
   import {
     initResolve