rollup-federation

🍣 A Rollup plugin which enables consumption of Federated Modules.

This plugin essentially reproduces the functionality of Webpack's ContainerReferencePlugin and OverridablesPlugin.

Limitations

This is not full support for Module Federation, there are limitations:

• Can not act as a container.
  • This means you can not federate modules from Rollup to Webpack
• Both the Rollup and Webpack container builds need to have the same target
  • Has only been tested with SystemJS
  • Should theoretically work with AMD as well, give it a try and provide feedback.

Requirements

This plugin requires an LTS Node version (v8.0.0+) and Rollup v1.20.0+.

Install

Using npm:

npm install @module-federation/rollup-federation --save-dev

Usage

Create a rollup.config.js configuration file and import the plugin:

import federation from '@module-federation/rollup-federation';

export default {
	input: 'src/index.js',
	output: {
		dir: 'output',
		format: 'system',
	},
	plugins: [
		federation({
			remotes: {
				foo: 'remote_foo',
			},
			shared: {
				lodash: '^4.17.0',
			},
		}),
	],
};

Import your remote:

(async () => {
	const fooHello = await import('foo/hello');
	fooHello.default('world');
})();

Then call rollup either via the CLI or the API.

Options

remotes

Type: Object Default: null

An Object that specifies the remotes that will be consumed.

remotes: {
  'import_name': 'import_alias'
}

shared

Type: Object Default: null

An Object that specifies the shared dependencies.

shared: {
  lodash: '^4.17.0',
  react: {
    eager: true,
    singleton: true,
    requiredVersion: '16.13.1',
  },
  "react-dom": {
    eager: true,
    singleton: true,
    requiredVersion: '16.13.1',
  }
}