logo
指南
配置
插件
指南
配置
插件
简体中文

RspackEmpShare 插件

快速开始

安装插件

npm
yarn
pnpm
bun
npm add @empjs/share

注册插件

emp.config.ts
import {defineConfig} from '@empjs/cli'
import {pluginRspackEmpShare} from '@empjs/share'
export default defineConfig(store => {
return {
  plugins:[
    pluginRspackEmpShare({
        name: 'mfHost',
        shared: {
          react: {
              singleton: true,
              requiredVersion: '18',
          },
          'react-dom': {
              singleton: true,
              requiredVersion: '18',
          },
        },
        exposes: {
          './App': './src/App',
          './CountComp': './src/CountComp',
        },
        empRuntime: {
          runtimeLib: "https://unpkg.yy.com/@empjs/[email protected]/output/full.js",
          frameworkLib: "https://unpkg.yy.com/@empjs/[email protected]/dist",
          frameworkGlobal: 'EMP_ADAPTER_REACT',
          framework: 'react',
        },
        // experiments: {
        //   federationRuntime: 'hoisted',
        // },
    }),
  ]
}

配置说明

name

  • 类型：string
  • 是否必填：是

Module Federation 模块名称，name 必须保证唯一。

Module Federation 通过 name 进行关联。name 将用于运行时数据获取以及 chunk 全局存储变量

查看详情

shared

shared 用于在消费者和生产间共享公共依赖，降低运行时下载体积从而提升性能。

  • 类型：PluginSharedOptions
  • 是否必填：否
  • 默认值：undefined

PluginSharedOptions 类型如下：

type PluginSharedOptions = string[] | SharedObject;

interface SharedObject {
  [sharedName: string]: SharedConfig;
}

interface SharedConfig {
  singleton?: boolean;
  requiredVersion?: string;
  eager?: boolean;
  shareScope?: string;
}
  • Example
plugins:[
    pluginRspackEmpShare({
      name: '@demo/host',
      shared: {
        react: {
          singleton: true,
        },
        'react-dom': {
          singleton: true,
        },
      },
    })]

查看详情

remotes

  • 类型：PluginRemoteOptions
  • 是否必填：否
  • 默认值：undefined
  • 使用场景：用 Module Federation 消费远程模块
TIP

消费者者特有参数，设置了 remotes 则可认为这是一个消费者

PluginRemoteOptions 类型如下：

type ModuleFederationInfo = string;
interface PluginRemoteOptions {
  [remoteAlias: string]: ModuleFederationInfo;
}
  • remoteAlias 为实际用户引用的名称，可自行配置，例如设置了 remoteAlias 为 demo ，那么消费方式为 import xx from 'demo' 。
  • ModuleFederationInfo 由 ModuleFederation name + @ + ModuleFederation entry 组成
    • ModuleFederation name 是生产者设置的名称
    • entry 可以为 mf-manifest.json 和 remoteEntry.js
    • entry 为 mf-manifest.json 拥有以下额外能力
      • 动态模块类型提示
      • 资源预加载
      • chrome devtool 调试工具
module.exports = {
  plugins: [
    pluginRspackEmpShare({
      name: 'host',
      // 下面的 remotes 中定义了两个 remote，分别是名称为：manifest_provider 在 3011 端口启动的项目、js_entry_provider 在 3012 端口启动的项目
      remotes: {
        'manifest-provider':
          'manifest_provider@http://localhost:3011/mf-manifest.json',
        'js-entry-provider':
          'js_entry_provider@http://localhost:3012/remoteEntry.js',
      },
    }),
  ],
};

查看详情

exposes

  • 类型：PluginExposesOptions
  • 是否必填：否
  • 默认值：undefined
  • 使用场景：决定 Module Federation 对外暴露的模块以及文件入口
TIP

生产者特有参数，设置了 exposes 则可认为这是一个生产者

配置之后，会将 expose 的模块单独抽离成一个 chunk ，如果有异步 chunk 会在抽取成单独 chunk（具体拆分行为根据 chunk 拆分规则而定）。

PluginExposesOptions 类型如下：

interface PluginExposesOptions {
  [exposeKey: string]: string | ExposesConfig;
}

interface ExposesConfig {
  // 文件入口
  import: string;
}

其中 exposeKey 与 Package Entry Points 规范基本一致（除了不支持正则匹配）。

举例：

module.exports = {
  plugins: [
    pluginRspackEmpShare({
      name: 'provider',
      exposes: {
        // 注意： 不支持 "./"，为 . 导出是表示为 default 默认导出
        '.': './src/index.tsx',
        './add': './src/utils/add.ts',
        './Button': './src/components/Button.tsx',
      },
    }),
  ],
};

查看详情

dts

  • 类型：boolean | PluginDtsOptions
  • 是否必填：否
  • 默认值：true
  • 使用场景：用于控制 Module Federation 生成/消费类型行为

配置之后，生产者会在构建时自动生成一个压缩的类型文件 @mf-types.zip（默认名称），消费者会自动拉取 remotes 的类型文件并解压至 @mf-types（默认名称）。

PluginDtsOptions 类型如下：

interface PluginDtsOptions {
  generateTypes?: boolean | DtsRemoteOptions;
  consumeTypes?: boolean | DtsHostOptions;
  tsConfigPath?: string;
}

查看详情

manifest

  • 类型：boolean | PluginManifestOptions
  • 默认值：undefined

用于控制是否生成 manifest ，以及对应的生成配置。

PluginManifestOptions 类型如下：

interface PluginManifestOptions {
  filePath?: string;
  disableAssetsAnalyze?: boolean;
  fileName?: string;
}

查看详情

getPublicPath

  • 类型：string

  • 是否必填：否

  • 默认值：undefined

  • 作用：用于设置动态 publicPath，设置后，对应的远程模块资源也将使用此 publicPath。例如，部署的项目是动态下发 cdn_prefix ，那么可以设置 getPublicPath 为 return "https:" + window.navigator.cdn_host + "/resource/app/"

  • 示例：

下面的示例中，设置了 getPublicPath，在其他消费者加载该生产者时，将会通过 new Function 的方式执行 getPublicPath 的代码获取到返回值，将会把返回值的内容作为该模块的 publicPath 静态资源前缀

rspack.config.ts
module.exports = {
  plugins: [
    pluginRspackEmpShare({
      name: 'provider',
      exposes: {
        './Button': './src/components/Button.tsx',
      },
      // ...
      getPublicPath: `return "https:" + window.navigator.cdn_host + "/resource/app/"`,
    }),
  ],
};

相关DEMO

查看详情

empRuntime.runtimeLib

  • 类型：string | 'useFrameworkLib'
  • 是否必填：否

MFRuntime 远程地址

empRuntime.runtimeGlobal

  • 类型：string
  • 是否必填：否

MFRuntime 全局命名

empRuntime.frameworkLib

  • 类型：string
  • 是否必填：否

UI框架 远程地址

empRuntime.frameworkGlobal

  • 类型：string
  • 是否必填：否

UI框架 全局命名

empRuntime.framework

  • 类型：'react' | 'vue2' | 'vue'
  • 是否必填：否

快捷设置 external 默认为 react

empRuntime.shareLib

  • 类型：{[key: string]: string | string[] | {entry: string; global: string; type: string}}
  • 是否必填：否

兼容 emp2.0 shareLib 配置

empRuntime.setExternals

  • 类型：(o: [key: string]: string) => void
  • 是否必填：否

自定义 externals 配置

module.exports = {
  plugins: [
    pluginRspackEmpShare({
      setExternals: (o => {
        o['history'] = 'EMP_ADAPTER_REACT.History'
        o['react-router'] = 'EMP_ADAPTER_REACT.ReactRouter'
        o['react-router-dom'] = 'EMP_ADAPTER_REACT.ReactRouterDOM'
      })
    }),
  ],
};