module-federation-types-plugin v1.0.6

Module Federation Types Plugin

Typing your microfrontends created with the Webpack Module Federation is easy! 🎉

Description

This webpack plugin types the Webpack Module Federation microfrontends.

The plugin merges type declaration files (.d.ts) from common microfrontend modules, specified in the exposes object for the ModuleFederation plugin and created with the generated ts-loader (see configuration settings below), into one declaration file.

In addition, the plugin allows you to upload type declaration files (.d.ts) from the specified URLs to the microfrontends, in the remotes object for the ModuleFederation plugin.

Options:

Example configuration:

In host app:

//webpack.config.ts
import ModuleFederationTypesPlugin from 'module-federation-types-plugin'

const appName = 'app'
const exposes = {
  './component': './src/component',
  './component_2': './src/component_2'
} // ModuleFederationTypesPlugin generate one file with types declaration for your exposes modules
const remotes = export const prodRemotes = {
  app1: 'app1@http://127.0.0.1:3000/remoteEntry.js',  // ModuleFederationTypesPlugin download app1.d.ts file from this URL
  app2: 'app2@http://127.0.0.1:3001/remoteEntry.js' // ModuleFederationTypesPlugin download app2.d.ts file from this URL
}

//...
  module: {
    rules: {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              declaration: true, // generate type declaration files for all project
              declarationDir: 'types', // This folder with generated .d.ts files for all project may be delete with option clearOnStart in ModuleFederationTypesPlugin after build
            },
          },
        },
      ],
    }
  },
  plugins: [
    new ModuleFederationPlugin({
      name: appName,
      filename: 'remoteEntry.js',
      exposes: exposes,
      remotes: remotes,
    }),
    new ModuleFederationTypesPlugin({
      name: appName,
      outDir: `./types`,
      exposes: exposes,
      remotes: remotes,
      remoteTypesDir: './src/types',
      clearOnStart: 'build',
      clearOnEnd: 'types',
    }),
  ]
// ...

After build

build/types folder (generated .d.ts file)

  // build/types/app.d.ts
  declare module "app/component" {
    //... component types
  }

  declare module "app/component_2" {
    //... component_2 types
  }

src/types folder (downloaded .d.ts files)

  app1.d.ts
  app2.d.ts