diff --git a/examples/vite-vite/vite-host/vite.config.js b/examples/vite-vite/vite-host/vite.config.js index 5d2184e..a4a6003 100644 --- a/examples/vite-vite/vite-host/vite.config.js +++ b/examples/vite-vite/vite-host/vite.config.js @@ -34,12 +34,12 @@ export default defineConfig({ requiredVersion: '18', }, 'react-dom': {}, - "ag-grid-community": {}, - // "ag-grid-react": {}, - // "@emotion/react": {}, - // "styled-components": { singleton: true }, - // "@emotion/styled": {}, - // "@mui/material": {}, + 'ag-grid-community': {}, + 'ag-grid-react': {}, + '@emotion/react': {}, + 'styled-components': { singleton: true }, + '@emotion/styled': {}, + '@mui/material': {}, }, runtimePlugins: ['./src/mfPlugins'], }), diff --git a/examples/vite-vite/vite-remote/vite.config.js b/examples/vite-vite/vite-remote/vite.config.js index 16b678e..5d413dd 100644 --- a/examples/vite-vite/vite-remote/vite.config.js +++ b/examples/vite-vite/vite-remote/vite.config.js @@ -35,11 +35,11 @@ export default defineConfig({ }, 'react-dom': {}, 'styled-components': { singleton: true }, - "ag-grid-community": {}, - // "ag-grid-react": {}, - // "@emotion/react": {}, - // "@emotion/styled": { singleton: true, }, - // "@mui/material": {}, + 'ag-grid-community': {}, + 'ag-grid-react': {}, + '@emotion/react': {}, + '@emotion/styled': { singleton: true }, + '@mui/material': {}, }, }), // If you set build.target: "chrome89", you can remove this plugin diff --git a/src/index.ts b/src/index.ts index 7254b10..b138c8a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,7 +4,6 @@ import pluginProxyRemoteEntry from './plugins/pluginProxyRemoteEntry'; import pluginProxyRemotes from './plugins/pluginProxyRemotes'; import { proxySharedModule } from './plugins/pluginProxySharedModule_preBuild'; import aliasToArrayPlugin from './utils/aliasToArrayPlugin'; -import normalizeBuildPlugin from './utils/normalizeBuild'; import { ModuleFederationOptions, normalizeModuleFederationOptions @@ -20,7 +19,6 @@ function federation(mfUserOptions: ModuleFederationOptions): Plugin[] { return [ aliasToArrayPlugin, normalizeOptimizeDepsPlugin, - normalizeBuildPlugin([...Object.keys(shared), "@module-federation/runtime"]), ...addEntry({ entryName: 'remoteEntry', entryPath: WRAP_REMOTE_ENTRY_PATH, diff --git a/src/plugins/pluginAddEntry.ts b/src/plugins/pluginAddEntry.ts index da9cd12..572213e 100644 --- a/src/plugins/pluginAddEntry.ts +++ b/src/plugins/pluginAddEntry.ts @@ -64,6 +64,7 @@ const addEntry = ({ entryName, entryPath, fileName }: AddEntryOptions): Plugin[] buildStart() { const hasHash = fileName?.includes?.("[hash") this.emitFile({ + name: entryName, [hasHash ? "name" : "fileName"]: fileName, type: 'chunk', id: entryPath, diff --git a/src/plugins/pluginProxySharedModule_preBuild.ts b/src/plugins/pluginProxySharedModule_preBuild.ts index 0772c17..f745762 100644 --- a/src/plugins/pluginProxySharedModule_preBuild.ts +++ b/src/plugins/pluginProxySharedModule_preBuild.ts @@ -3,7 +3,8 @@ import { walk } from 'estree-walker'; import MagicString from 'magic-string'; import { Plugin, UserConfig } from 'vite'; import { NormalizedShared } from '../utils/normalizeModuleFederationOptions'; -import { getLoadShareModulePath, getPreBuildLibPath, writeLoadShareModule, writeLocalSharedImportMap } from '../virtualModules/virtualShared_preBuild'; +import { wrapManualChunks } from '../utils/wrapManualChunks'; +import { getLoadShareModulePath, getPreBuildLibPath, LOAD_SHARE_TAG, writeLoadShareModule, writeLocalSharedImportMap } from '../virtualModules/virtualShared_preBuild'; export function proxySharedModule( options: { shared?: NormalizedShared; include?: string | string[]; exclude?: string | string[] } ): Plugin[] { @@ -15,14 +16,27 @@ export function proxySharedModule( name: 'preBuildShared', enforce: 'post', config(config: UserConfig, { command }) { + if (!config.build) config.build = {}; + if (!config.build.rollupOptions) config.build.rollupOptions = {}; + let { rollupOptions } = config.build; + if (!rollupOptions.output) rollupOptions.output = {}; // config?.optimizeDeps?.include?.push?.("an-empty-js-file"); // config.optimizeDeps.needsInterop.push('an-empty-js-file'); - (config.resolve as any).alias.push( + wrapManualChunks(config.build.rollupOptions.output, (id: string) => { + if (id.includes("node_modules/@module-federation/runtime")) { + return "@module-federation/runtime" + } + if (id.includes(LOAD_SHARE_TAG) || id.includes("__mf__prebuildwrap_")) { + return id.split("/").pop() + } + }); + ; (config.resolve as any).alias.push( ...Object.keys(shared).map((key) => { config?.optimizeDeps?.include?.push?.(getPreBuildLibPath(key)); // write proxyFile writeLoadShareModule(key, shared[key], command) const preBuildLibPath = getLoadShareModulePath(key) + config?.optimizeDeps?.needsInterop?.push(key); return { // Intercept all dependency requests to the proxy module // Dependency requests issued by localSharedImportMap are allowed without proxying. @@ -30,6 +44,7 @@ export function proxySharedModule( if (importer.includes(`node_modules/${key}/`)) { return (this as any).resolve(key) } + config?.optimizeDeps?.needsInterop?.push(preBuildLibPath); return (this as any).resolve(preBuildLibPath) } } @@ -37,11 +52,14 @@ export function proxySharedModule( ); (config.resolve as any).alias.push( ...Object.keys(shared).map((key) => { - return { - find: new RegExp(`^${getPreBuildLibPath(key)}$`), customResolver(source: string, importer: string) { - return (this as any).resolve(key) + return command === "build" ? + { find: new RegExp(`^${getPreBuildLibPath(key)}$`), replacement: key } : + { + find: new RegExp(`^${getPreBuildLibPath(key)}$`), customResolver(source: string, importer: string) { + + return (this as any).resolve(key) + } } - } }) ); }, @@ -126,4 +144,4 @@ export function proxySharedModule( }, } ] -} \ No newline at end of file +} diff --git a/src/utils/normalizeBuild.ts b/src/utils/normalizeBuild.ts deleted file mode 100644 index d51bbd8..0000000 --- a/src/utils/normalizeBuild.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { UserConfig } from 'vite'; - -interface Output { - manualChunks?: { - [key: string]: any; - }; -} - -export default (singleChunkModules: string[]) => ({ - name: 'normalizeBuild', - config: (config: UserConfig, { command }: { command: string }) => { - if (!config.build) config.build = {}; - if (!config.build.rollupOptions) config.build.rollupOptions = {}; - let { rollupOptions } = config.build; - if (!rollupOptions.output) rollupOptions.output = {}; - normalizeManualChunks(rollupOptions.output as any, singleChunkModules); - }, -}); - -function normalizeManualChunks(output: Output, singleChunkModules: string[]): void { - const pattern = new RegExp(`node_modules/(${singleChunkModules.join('|')})/`); - if (!output.manualChunks) output.manualChunks = {}; - const wrapManualChunks = - (original: any) => - (id: string, ...args: any[]) => { - const [_, moduleName] = id.match(pattern) || []; - if (moduleName) { - return moduleName; - } - if (typeof original === 'function') { - return original(id, ...args); - } - if (typeof original === 'object' && original) { - return original[id]; - } - }; - output.manualChunks = wrapManualChunks(output.manualChunks); -} diff --git a/src/utils/wrapManualChunks.ts b/src/utils/wrapManualChunks.ts new file mode 100644 index 0000000..ea5c656 --- /dev/null +++ b/src/utils/wrapManualChunks.ts @@ -0,0 +1,16 @@ +export function wrapManualChunks(output: any, manualChunksCb: Function): void { + if (!output.manualChunks) output.manualChunks = {}; + const wrapManualChunks = + (original: any) => + (id: string, ...args: any[]) => { + const customRes = manualChunksCb?.(id, ...args) + if (customRes) return customRes + if (typeof original === 'function') { + return original(id, ...args); + } + if (typeof original === 'object' && original) { + return original[id]; + } + }; + output.manualChunks = wrapManualChunks(output.manualChunks); +} \ No newline at end of file diff --git a/src/virtualModules/virtualShared_preBuild.ts b/src/virtualModules/virtualShared_preBuild.ts index 9826bcb..cfc1040 100644 --- a/src/virtualModules/virtualShared_preBuild.ts +++ b/src/virtualModules/virtualShared_preBuild.ts @@ -43,13 +43,14 @@ export function writeLocalSharedImportMap(pkgList: string[]) { `) } +export const LOAD_SHARE_TAG = "__mf__loadShare_" /** * generate loadShare virtual module */ const cacheMap1: Record = {} export function getLoadShareModulePath(pkg: string): string { const { name } = getNormalizeModuleFederationOptions() - if (!cacheMap1[pkg]) cacheMap1[pkg] = npmPackageNameToFileName(name) + "_" + `__mf__loadShare_${npmPackageNameToFileName(pkg)}.js` + if (!cacheMap1[pkg]) cacheMap1[pkg] = npmPackageNameToFileName(name) + "_" + `${LOAD_SHARE_TAG}${npmPackageNameToFileName(pkg)}.js` const filename = cacheMap1[pkg] return resolve(emptyNpmDir, filename) }