This package provides an esbuild plugin for Module Federation, enabling you to easily share code between independently built and deployed applications.
Install the package using npm:
npm install @module-federation/esbuild
To use the Module Federation plugin with esbuild, add it to your esbuild configuration:
const esbuild = require('esbuild');
const path = require('path');
const { moduleFederationPlugin } = require('@module-federation/esbuild/plugin');
const federationConfig = require('./federation.config.js');
async function buildApp() {
const tsConfig = 'tsconfig.json';
const outputPath = path.join('dist', 'host');
try {
await esbuild.build({
entryPoints: [path.join('host', 'main.ts')],
outdir: outputPath,
bundle: true,
platform: 'browser',
format: 'esm',
mainFields: ['es2020', 'browser', 'module', 'main'],
conditions: ['es2020', 'es2015', 'module'],
resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
tsconfig: tsConfig,
splitting: true,
plugins: [moduleFederationPlugin(federationConfig)],
});
} catch (err) {
console.error(err);
process.exit(1);
}
}
buildApp();
// Example of federation.config.js
const { withFederation, shareAll } = require('@module-federation/esbuild/build');
module.exports = withFederation({
name: 'host',
filename: 'remoteEntry.js',
exposes: {
'./Component': './src/Component',
},
shared: {
react: {
singleton: true,
version: '^18.2.0',
},
'react-dom': {
singleton: true,
version: '^18.2.0',
},
rxjs: {
singleton: true,
version: '^7.8.1',
},
...shareAll({
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
includeSecondaries: false,
}),
},
});
The moduleFederationPlugin
accepts a configuration object with the following properties:
name
(string): The name of the host application.filename
(string, optional): The name of the remote entry file. Defaults to'remoteEntry.js'
.remotes
(object, optional): An object specifying the remote applications and their entry points.exposes
(object, optional): An object specifying the modules to be exposed by the host application.shared
(array, optional): An array of package names to be shared between the host and remote applications.
The moduleFederationPlugin
includes the following features:
- Virtual Share Module: Creates a virtual module for sharing dependencies between the host and remote applications.
- Virtual Remote Module: Creates a virtual module for importing exposed modules from remote applications.
- CommonJS to ESM Transformation: Transforms CommonJS modules to ESM format for compatibility with Module Federation.
- Shared Dependencies Linking: Links shared dependencies between the host and remote applications.
- Manifest Generation: Generates a manifest file containing information about the exposed modules and their exports.
Creates an esbuild plugin for Module Federation.
config
(object): The Module Federation configuration.name
(string): The name of the host application.filename
(string, optional): The name of the remote entry file. Defaults to'remoteEntry.js'
.remotes
(object, optional): An object specifying the remote applications and their entry points.exposes
(object, optional): An object specifying the modules to be exposed by the host application.shared
(array, optional): An array of package names to be shared between the host and remote applications.
Returns an esbuild plugin instance.