@module-federation/treeshake-frontend 2.1.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -21
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -22,17 +22,17 @@
|
|
|
22
22
|
本应用通过一个后端服务来获取打包产物。你需要配置该服务的地址，有以下三种方式（优先级从高到低）：
|
|
23
23
|
|
|
24
24
|
1. **在页面中配置**：
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
25
|
+
- 在主界面的表单区域，找到并展开 “**高级构建配置**” 面板。
|
|
26
|
+
- 在 “**Server API Base URL**” 输入框中，填入你的后端服务地址（例如：`http://localhost:3000/tree-shaking-shared`）。
|
|
27
|
+
- 该配置会自动保存到浏览器的 localStorage（`treeshake_server_url`）中。
|
|
28
28
|
|
|
29
29
|
2. **通过环境变量配置**：
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
-
|
|
30
|
+
- 在项目根目录下创建一个 `.env` 文件。
|
|
31
|
+
- 在文件中添加一行：`VITE_API_BASE_URL=http://localhost:3000/tree-shaking-shared`
|
|
32
|
+
- 重新启动或构建前端应用即可生效。
|
|
33
33
|
|
|
34
34
|
3. **默认地址**：
|
|
35
|
-
-
|
|
35
|
+
- 如果以上两种方式都未配置，应用将默认尝试连接 `http://localhost:3000/tree-shaking-shared`。
|
|
36
36
|
|
|
37
37
|
### 2. 使用 Mock Mode（无需后端）
|
|
38
38
|
|
|
@@ -44,19 +44,19 @@
|
|
|
44
44
|
|
|
45
45
|
在 “**高级构建配置**” 面板中，你可以自定义传递给后端打包服务的构建参数，例如：
|
|
46
46
|
|
|
47
|
-
-
|
|
48
|
-
-
|
|
49
|
-
-
|
|
50
|
-
-
|
|
51
|
-
-
|
|
47
|
+
- `target`、`format`、`platform`：用于 esbuild 或其他打包工具的配置。
|
|
48
|
+
- `minify`：是否开启代码压缩。
|
|
49
|
+
- `External 依赖`：需要从打包产物中排除的第三方库（例如 `react`, `react-dom`）。
|
|
50
|
+
- `请求头 (JSON)`：允许你添加自定义的 HTTP 请求头，例如用于身份验证的 `Authorization`。
|
|
51
|
+
- `额外构建配置 (JSON)`：一个灵活的 JSON 输入框，用于传递任何与后端服务约定的其他参数。
|
|
52
52
|
|
|
53
53
|
## 技术栈
|
|
54
54
|
|
|
55
|
-
-
|
|
56
|
-
-
|
|
57
|
-
-
|
|
58
|
-
-
|
|
59
|
-
-
|
|
55
|
+
- **框架**: Rsbuild + React
|
|
56
|
+
- **UI**: Tailwind CSS + shadcn/ui
|
|
57
|
+
- **图表**: Recharts
|
|
58
|
+
- **状态管理**: React Hooks
|
|
59
|
+
- **图标**: Lucide React
|
|
60
60
|
|
|
61
61
|
## 开发与构建
|
|
62
62
|
|
|
@@ -82,16 +82,16 @@ pnpm run test:e2e
|
|
|
82
82
|
该包提供一个可注册到 `@module-federation/treeshake-server` 的前端适配器：
|
|
83
83
|
|
|
84
84
|
```ts
|
|
85
|
-
import { createTreeshakeFrontendAdapter } from
|
|
86
|
-
import { createApp } from
|
|
85
|
+
import { createTreeshakeFrontendAdapter } from '@module-federation/treeshake-frontend/adapter';
|
|
86
|
+
import { createApp } from '@module-federation/treeshake-server';
|
|
87
87
|
|
|
88
88
|
const app = createApp(
|
|
89
89
|
{ objectStore },
|
|
90
90
|
{
|
|
91
91
|
frontendAdapters: [
|
|
92
92
|
createTreeshakeFrontendAdapter({
|
|
93
|
-
basePath:
|
|
94
|
-
distDir:
|
|
93
|
+
basePath: '/tree-shaking',
|
|
94
|
+
distDir: '/path/to/treeshake-frontend/dist',
|
|
95
95
|
}),
|
|
96
96
|
],
|
|
97
97
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@module-federation/treeshake-frontend",
|
|
3
|
-
"version": "2.1
|
|
3
|
+
"version": "2.2.1",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@hookform/resolvers": "^3.10.0",
|
|
6
6
|
"@radix-ui/react-accordion": "^1.2.2",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"tailwindcss": "v3.4.16",
|
|
77
77
|
"typescript": "~5.6.2",
|
|
78
78
|
"typescript-eslint": "^8.15.0",
|
|
79
|
-
"@module-federation/treeshake-server": "2.1
|
|
79
|
+
"@module-federation/treeshake-server": "2.2.1"
|
|
80
80
|
},
|
|
81
81
|
"exports": {
|
|
82
82
|
"./adapter": {
|
|
@@ -106,6 +106,8 @@
|
|
|
106
106
|
"lint": "eslint .",
|
|
107
107
|
"preview": "rsbuild preview",
|
|
108
108
|
"e2e:serve": "node scripts/e2e-server.js",
|
|
109
|
-
"test:e2e": "node ../../scripts/ensure-playwright.js && pnpm --filter
|
|
109
|
+
"test:e2e": "node ../../scripts/ensure-playwright.js && pnpm exec turbo run build --filter=@module-federation/treeshake-server && pnpm run build && rstest run -c rstest.config.ts",
|
|
110
|
+
"test": "pnpm -C . test:e2e",
|
|
111
|
+
"e2e": "pnpm -C . test:e2e"
|
|
110
112
|
}
|
|
111
113
|
}
|