Skip to content

tony-show/module-federation-types-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

Name Type Default Description
name String required option Name of your app (like name option in ModuleFederation)
outDir String types The path where the generated type declaration file will be saved in the project build folder (for the current application)
exposes Object undefined The object exposes the entities you are sharing (like exposes option in ModuleFederation)
remotes Object undefined The object remotes with url adreses to remoteEntry files of your microfrontends (like remotes option in ModuleFederation)
remoteTypesDir String ../../src/microfrontends/types The path to which the type declarations (.d.ts) files of your microfronts specified in the remotes option will be downloaded
clearOnStart String undefined The path to the folder to be delete before build
clearOnEnd String undefined The path to the folder to be delete after the build

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published