【亲测免费】 Vite Plugin for Module Federation 使用教程

1. 项目的目录结构及介绍

module-federation/vite 项目是一个用于在 Vite 中实现模块联邦的开源插件。以下是项目的目录结构及其介绍：

module-federation/vite/
├── .github/                # GitHub 相关的配置和模板文件
├── .husky/                 # Husky 配置文件夹，用于 Git 钩子
├── .vscode/                # Visual Studio Code 的配置文件
├── docs/                   # 项目文档
├── e2e/                    # 端到端测试文件
├── examples/               # 示例项目文件夹
├── src/                    # 源代码文件夹
├── .gitignore              # Git 忽略文件列表
├── .prettierrc             # Prettier 配置文件
├── CHANGELOG.md            # 更改日志文件
├── LICENSE                 # 许可证文件
├── README.md               # 项目自述文件
├── package.json            # 项目包配置文件
├── playwright.config.ts    # Playwright 配置文件
├── pnpm-lock.yaml          # pnpm 锁文件
├── pnpm-workspace.yaml     # pnpm 工作空间配置文件
├── tsconfig.json           # TypeScript 配置文件
└── vitest.config.ts        # Vitest 配置文件

2. 项目的启动文件介绍

项目的启动主要通过 package.json 文件中的脚本实现。以下是一些常用的启动脚本：

• pnpm install: 安装项目依赖。
• pnpm run build: 构建项目。
• pnpm run multi-example: 运行多个示例项目。

3. 项目的配置文件介绍

项目的配置主要通过以下文件进行：

• vite.config.ts: Vite 的配置文件。以下是配置文件的一个基本示例：

import { defineConfig } from 'vite';
import { federation } from '@module-federation/vite';

export default defineConfig({
  plugins: [
    federation({
      name: "remote",
      filename: "remoteEntry.js",
      exposes: {
        "./remote-app": "./src/App.vue",
      },
      shared: ["vue"],
    }),
  ],
  server: {
    origin: "http://localhost:{Your port}",
  },
  build: {
    target: 'chrome89',
  },
});

在这个配置文件中，我们定义了一个远程应用 remote，它将 App.vue 组件暴露为 remote-app。shared 属性确保主机和远程应用使用相同的 Vue 库。

• tsconfig.json: TypeScript 的配置文件，用于指定 TypeScript 编译器的选项。

确保在开始之前，你已经正确设置了 Vite 开发环境，并且安装了所有必要的依赖。按照以上步骤，你就可以开始使用 Vite Plugin for Module Federation 来构建你的微前端项目了。