feat(vite): Compatibility documentation (#3065)

Author: zhangHongEn

apps/website-new/docs/en/configure/index.mdx

@@ -1,6 +1,6 @@
 # Configuration Overview
 
-The current page lists all the configuration options for `Module Federation`. Please refer to the documentation for [`Rspack Plugin`](../guide/basic/rspack) and [`Webpack Plugin`](../guide/basic/webpack) to understand how to use them.
+The current page lists all the configuration options for `Module Federation`. Please refer to the documentation for [`Rspack Plugin`](../guide/basic/rspack) and [`Webpack Plugin`](../guide/basic/webpack) and [`Vite Plugin`](../guide/basic/vite) to understand how to use them.
 
 ```ts
 type ModuleFederationOptions = {

apps/website-new/docs/en/guide/basic/_meta.json

@@ -1 +1 @@
-["runtime", "rspack", "webpack", "chrome-devtool", "type-prompt", "error-catalog"]
+["runtime", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt", "error-catalog"]

apps/website-new/docs/en/guide/basic/vite.mdx

@@ -0,0 +1,92 @@
+# Vite Plugin
+
+- Can build modules that meet the `Module Federation` loading specifications.
+- Can consume modules that adhere to the `Module Federation` specifications using aliases.
+- Can configure shared dependencies for modules, so that when the host environment of the loaded module already has the corresponding dependency, it will not be loaded again.
+
+:::warning Unsupported Options
+Except for the [dev、dts](../../configure/dev.html) options, all options are supported
+:::
+- roadmap 🗓️
+  - When a module has remote types, it will automatically download and consume the types of the remote modules.
+  - Consuming remote modules will have hot update capabilities.
+  - nuxt ssr 
+
+## Quick Start
+
+### Installation
+
+You can install the plugin with the following commands:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs
+  command={{
+    npm: 'npm add @module-federation/vite --save',
+    yarn: 'yarn add @module-federation/vite --save',
+    pnpm: 'pnpm add @module-federation/vite --save',
+    bun: 'bun add @module-federation/vite --save',
+  }}
+/>
+
+### Register the Plugin
+
+In `Vite`, you can add the plugin through the `plugins` configuration item in the `vite.config.js` file:
+
+```ts title='vite.config.js'
+import { federation } from '@module-federation/vite';
+module.exports = {
+  server: {
+    origin: 'http://localhost:2000',
+    port: 2000,
+  },
+  base: "http://localhost:2000",
+  plugins: [
+    federation({
+      name: 'vite_provider',
+      manifest: true,
+      remotes: {
+        esm_remote: {
+          type: "module",
+          name: "esm_remote",
+          entry: "https://[...]/remoteEntry.js",
+        },
+        var_remote: "var_remote@https://[...]/remoteEntry.js",
+      },
+      exposes: {
+        './button': './src/components/button',
+      },
+      shared: {
+        react: {
+          singleton: true,
+        },
+        'react/': {
+          singleton: true,
+        },
+      },
+    }),
+  ],
+  // Do you need to support build targets lower than chrome89?
+  // You can use 'vite-plugin-top-level-await' plugin for that.
+  build: {
+    target: 'chrome89',
+  },
+};
+```
+
+## Configure the Build Plugin
+
+- Type: `ModuleFederationPlugin(options: ModuleFederationOptions)`
+
+- The configuration structure for the Module Federation plugin is as follows:
+
+```ts
+type ModuleFederationOptions = {
+  name: string;
+  filename?: string;
+  remotes?: Array<RemoteInfo>;
+  shared?: ShareInfos;
+};
+```
+
+You can find detailed explanations of all configuration items on the [Configuration Overview](../../configure/index) page.

apps/website-new/docs/zh/guide/basic/_meta.json

@@ -1 +1 @@
-["runtime", "rspack", "webpack", "chrome-devtool", "type-prompt"]
+["runtime", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt"]

apps/website-new/docs/zh/guide/basic/vite.mdx

@@ -0,0 +1,92 @@
+# Vite Plugin
+
+- 能够构建出满足 `Module Federation` 加载规范的模块
+- 能够使用别名消费 `Module Federation` 规范的模块
+- 能够设置模块的共享依赖配置，当加载模块的宿主环境已经存在对应依赖时将不会重复加载
+
+:::warning 不支持的选项
+除了[dev、dts](../../configure/dev.html) 选项外，其他选项全部支持
+:::
+- roadmap 🗓️
+  - 当模块具备远程类型时将会自动把远程模块的类型下载下来消费
+  - 消费远程模块时将具备热更新能力
+  - nuxt ssr 
+
+## 快速开始
+
+### 安装
+
+你可以通过如下的命令安装插件：
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs
+  command={{
+    npm: 'npm add @module-federation/vite --save',
+    yarn: 'yarn add @module-federation/vite --save',
+    pnpm: 'pnpm add @module-federation/vite --save',
+    bun: 'bun add @module-federation/vite --save',
+  }}
+/>
+
+### 注册插件
+
+在 `vite` 中，你可以通过 `vite.config.js` 配置文件中的 `plugins` 配置项来添加插件：
+
+```ts title='vite.config.js'
+import { federation } from '@module-federation/vite';
+module.exports = {
+  server: {
+    origin: 'http://localhost:2000',
+    port: 2000,
+  },
+  remotes: {
+    esm_remote: {
+      type: "module",
+      name: "esm_remote",
+      entry: "https://[...]/remoteEntry.js",
+    },
+    var_remote: "var_remote@https://[...]/remoteEntry.js",
+  },
+  base: "http://localhost:2000",
+  plugins: [
+    federation({
+      name: 'vite_provider',
+      manifest: true,
+      exposes: {
+        './button': './src/components/button',
+      },
+      shared: {
+        react: {
+          singleton: true,
+        },
+        'react/': {
+          singleton: true,
+        },
+      },
+    }),
+  ],
+  // Do you need to support build targets lower than chrome89?
+  // You can use 'vite-plugin-top-level-await' plugin for that.
+  build: {
+    target: 'chrome89',
+  },
+};
+```
+
+## 配置构建插件
+
+- Type: `ModuleFederationPlugin(options: ModuleFederationOptions)`
+
+- Module federation 插件的配置结构如下所示：
+
+```ts
+type ModuleFederationOptions {
+    name: string;
+    filename?: string,
+    remotes?: Array<RemoteInfo>;
+    shared?: ShareInfos;
+};
+```
+
+你可以在 [Config 总览](../../configure/index) 页面找到所有配置项的详细说明。