ModuleFederationPlugin

?ModuleFederationPlugin? 允許一個(gè)構(gòu)建在運(yùn)行時(shí)提供或使用其他獨(dú)立構(gòu)建的模塊。

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

Options

runtime

用指定的名稱創(chuàng)建一個(gè)新的運(yùn)行時(shí)塊。

webpack.config.js

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

Specify package versions

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

Array syntax

該語法允許您僅使用包名共享庫。這種方法對(duì)原型設(shè)計(jì)很好，但它不允許您擴(kuò)展到大型生產(chǎn)環(huán)境，因?yà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

此語法為您提供了對(duì)每個(gè)共享庫的更多控制，您可以將包名定義為密鑰，將版本(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

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

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?

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

import

?false | string?

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

packageName

?string?

用于從描述文件確定所需版本的包名。只有當(dāng)不能從請(qǐng)求中自動(dòng)確定包名時(shí)才需要這樣做。

requiredVersion

?false | string?

所需的軟件包版本。

shareKey

?string?

請(qǐng)求的共享模塊在這個(gè)鍵下從共享作用域查找。

shareScope

?string?

共享作用域的名稱。

singleton

?boolean?

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

strictVersion

?boolean?

這個(gè)提示允許webpack在版本不合法的情況下拒絕共享模塊(當(dāng)本地回退模塊可用且共享模塊不是單例時(shí)默認(rèn)為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