ModuleFederationPlugin

?ModuleFederationPlugin? 允許一個構(gòu)建在運行時提供或使用其他獨立構(gòu)建的模塊。

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // options' typings in typescript
      runtime: string | false,
    }),
  ],
};

Options

runtime

用指定的名稱創(chuàng)建一個新的運行時塊。

webpack.config.js

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      runtime: 'my-runtime-name',
    }),
  ],
};

Specify package versions

有三種方法可以指定共享庫的版本。

Array syntax

該語法允許您僅使用包名共享庫。這種方法對原型設(shè)計很好，但它不允許您擴展到大型生產(chǎn)環(huán)境，因為 ?react? 和 ?react-dom? 等庫將需要額外的需求。

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // adds lodash as shared module
      // version is inferred from package.json
      // there is no version check for the required version
      // so it will always use the higher version found
      shared: ['lodash'],
    }),
  ],
};

Object syntax

此語法為您提供了對每個共享庫的更多控制，您可以將包名定義為密鑰，將版本(semver)定義為值。

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      shared: {
        // adds lodash as shared module
        // version is inferred from package.json
        // it will use the highest lodash version that is >= 4.17 and < 5
        lodash: '^4.17.0',
      },
    }),
  ],
};

Object syntax with sharing hints

此語法允許您為每個共享包提供額外的提示，其中將包名稱定義為鍵，并將值定義為包含修改共享行為提示的對象。

const deps = require('./package.json').dependencies;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      shared: {
        // adds react as shared module
        react: {
          requiredVersion: deps.react,
          singleton: true,
        },
      },
    }),
  ],
};

Sharing hints

eager

?boolean?

這個提示將允許webpack直接包含提供的和回退模塊，而不是通過異步請求獲取庫。換句話說，這允許在初始塊中使用這個共享模塊。此外，請注意，當啟用此提示時，所有提供的模塊和回退模塊將始終被下載。

import

?false | string?

應(yīng)該放在共享作用域中的所提供的模塊。如果在共享范圍內(nèi)沒有找到共享模塊或版本無效，則此提供的模塊還充當回退模塊。(此提示的值默認為屬性名。)

packageName

?string?

用于從描述文件確定所需版本的包名。只有當不能從請求中自動確定包名時才需要這樣做。

requiredVersion

?false | string?

所需的軟件包版本。

shareKey

?string?

請求的共享模塊在這個鍵下從共享作用域查找。

shareScope

?string?

共享作用域的名稱。

singleton

?boolean?

這個提示只允許在共享作用域中使用一個版本的共享模塊(默認禁用)。一些庫使用全局內(nèi)部狀態(tài)(例如react, react-dom)。因此，一次只運行一個庫實例是至關(guān)重要的。

strictVersion

?boolean?

這個提示允許webpack在版本不合法的情況下拒絕共享模塊(當本地回退模塊可用且共享模塊不是單例時默認為true，否則為false，如果沒有指定所需的版本則不起作用)。

version

?false | string?

所提供模塊的版本。它允許webpack替換低匹配版本，但不能替換高匹配版本。

Additional examples

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // adds vue as shared module
      // version is inferred from package.json
      // it will always use the shared version, but print a warning when the shared vue is < 2.6.5 or >= 3
      shared: {
        vue: {
          requiredVersion: '^2.6.5',
          singleton: true,
        },
      },
    }),
  ],
};

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // adds vue as shared module
      // there is no local version provided
      // it will emit a warning if the shared vue is < 2.6.5 or >= 3
      shared: {
        vue: {
          import: false,
          requiredVersion: '^2.6.5',
        },
      },
    }),
  ],
};

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // adds vue as shared module
      // there is no local version provided
      // it will throw an error when the shared vue is < 2.6.5 or >= 3
      shared: {
        vue: {
          import: false,
          requiredVersion: '^2.6.5',
          strictVersion: true,
        },
      },
    }),
  ],
};

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      shared: {
        'my-vue': {
          // can be referenced by import "my-vue"
          import: 'vue', // the "vue" package will be used as a provided and fallback module
          shareKey: 'shared-vue', // under this name the shared module will be placed in the share scope
          shareScope: 'default', // share scope with this name will be used
          singleton: true, // only a single version of the shared module is allowed
          strictVersion: true, // don't use shared version when version isn't valid. Singleton or modules without fallback will throw, otherwise fallback is used
          version: '1.2.3', // the version of the shared module
          requiredVersion: '^1.0.0', // the required version of the shared module
        },
      },
    }),
  ],
};

Further Reading

• Module Federation