完成对app-shared 的拆分

2025-09-18 04:12:50 +08:00
parent 327e80d71e
commit cc23a6e1f0
12 changed files with 43 additions and 39 deletions
--- a/README.md
+++ b/README.md
@@ -26,8 +26,8 @@
 ## 开发任务

 - [x] 基于DDD理念改造
- [ ] 【即将完成】基于 vite-plugin-federation 拆分领域模块为联邦模块，实现微前端
- [ ] 领域模块实现 docker自动化构建部署上线
+- [x] 基于 vite-plugin-federation 拆分领域模块为联邦模块，实现微前端
+- [ ] 领域模块实现 docker 自动化构建部署上线
 - [ ] Deno集成GraphQL

 ## 文件夹结构
@@ -39,8 +39,8 @@
 ├── back-end          # 【后端】基于Deno写的后端 测试接口，仅供测试
 ├── doc               # 一些markdown笔记
 ├── front-end         # 前端 微服务 项目
-│   ├── app-car       # 独立的【购物车】领域模块
 │   ├── app-product   # 独立的【商品】领域模块
+│   ├── app-shared    # 独立的 共享资源 模块
 │   ├── ....          # 实际项目还会有更多其他的领域模块
 │   └── main-app      # 主应用（入口应用）
 └── README.md         # 帮助文档
--- a/front-end/app-product/package.json
+++ b/front-end/app-product/package.json
@@ -7,10 +7,9 @@
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
-    "dev": "vite --port 5001 --strictPort",
-    "serve": "vite preview --port 5001 --strictPort",
-    "build": "vite build",
-    "all": "npm run build && npm run serve",
+    "dev": "concurrently \"npm run build\" \"npm run serve\"",
+    "serve": "vite preview  --port 1301 --strictPort",
+    "build": "vite build --watch",
    "type-check": "vue-tsc --build"
  },
  "dependencies": {
--- a/front-end/app-product/src/domains/product/di/productModule.ts
+++ b/front-end/app-product/src/domains/product/di/productModule.ts
@@ -1,5 +1,7 @@
 // 从商品联邦模块导入领域层资源
-import {HttpProductRepository, ProductApplicationService, ProductRepository} from 'product/ProductDomain';
+import {ProductRepository} from "@domains/product/ports/repositories/ProductRepository";
+import {HttpProductRepository} from "@domains/product/infr/api/HttpProductRepository";
+import {ProductApplicationService} from "@domains/product/application/services/ProductApplicationService";

 /**
 * 商品领域的依赖注入配置
--- a/front-end/app-product/src/features/product/views/ProductDetail.tsx
+++ b/front-end/app-product/src/features/product/views/ProductDetail.tsx
@@ -1,7 +1,7 @@
-import { product } from 'mainApp/productService';
-import { ProductType } from '@domains/product/domain/type/ProductType';
-import { defineComponent, onMounted, reactive } from 'vue'
-import { useRoute } from 'vue-router'
+import {product} from '@domains/product/di/productModule';
+import {ProductType} from '@domains/product/domain/type/ProductType';
+import {defineComponent, onMounted, reactive} from 'vue'
+import {useRoute} from 'vue-router'

 interface storeType {
    item: ProductType
@@ -9,7 +9,6 @@ interface storeType {
 }

 export default defineComponent({
-    name: "productModule-ProductDetail",
    setup() {
        const route = useRoute();
        const productService = product.createProductApplicationService();
--- a/front-end/app-product/src/features/product/views/ProductList.tsx
+++ b/front-end/app-product/src/features/product/views/ProductList.tsx
@@ -1,14 +1,13 @@
-import { defineComponent, onMounted, reactive } from 'vue'
-import { useRouter } from 'vue-router';
-import { product } from 'mainApp/productService';
-import { ProductType } from '@domains/product/domain/type/ProductType';
+import {defineComponent, onMounted, reactive} from 'vue'
+import {useRouter} from 'vue-router';
+import {product} from '@domains/product/di/productModule';
+import {ProductType} from '@domains/product/domain/type/ProductType';

 interface storeType {
    list: Array<ProductType>
 }

 export default defineComponent({
-    name: "productModule-ProductList",
    setup() {

        const router = useRouter();
@@ -30,7 +29,7 @@ export default defineComponent({

        return () => (
            <div class="ProductList">
-                <h1>商品领域模块 - 商品列表页面</h1>
+                <h1>商品领域模块 - 商品列表页面3</h1>
                <hr />
                <h2>从Deno 后端 加载的数据，点击进详情</h2>
                <ul>
--- a/front-end/app-product/src/shared/types/product-federation.d.ts
+++ b/front-end/app-product/src/shared/types/product-federation.d.ts
@@ -1,7 +1,3 @@
-declare module 'mainApp/productService' {
-    export const product: any;
-}
-
 declare module 'shared/infra' {
    export const http: any;
 }
--- a/front-end/app-product/vite.config.ts
+++ b/front-end/app-product/vite.config.ts
@@ -6,12 +6,16 @@ import federation from '@originjs/vite-plugin-federation';
 import {fileURLToPath, URL} from "node:url";

 export default defineConfig({
+    server: {
+        port: 1301,
+        host: '0.0.0.0',
+        strictPort: true,
+    },
    plugins: [
        federation({
            name: 'product',
            remotes: {
-                mainApp: "http://localhost:5000/assets/remoteEntry.js",
-                shared: 'http://localhost:5555/assets/remoteEntry.js'
+                shared: 'http://localhost:1333/assets/remoteEntry.js'
            },
            exposes: { // 暴露给主应用的资源（按功能分组）
                './ProductDomain': './src/domains/product/index.ts', // 领域层（实体、服务、接口等）
--- a/front-end/app-shared/package.json
+++ b/front-end/app-shared/package.json
@@ -6,10 +6,10 @@
  "author": "",
  "license": "ISC",
  "scripts": {
-    "dev": "vite --port 5555 --strictPort",
-    "build": "vite build",
-    "serve": "vite preview --port 5555 --strictPort",
-    "all": "npm run build && npm run serve"
+    "dev": "concurrently \"npm run build\" \"npm run serve\"",
+    "serve": "vite preview  --port 1333 --strictPort",
+    "build": "vite build --watch",
+    "type-check": "vue-tsc --build"
  },
  "dependencies": {
    "axios": "^1.12.2"
--- a/front-end/app-shared/vite.config.ts
+++ b/front-end/app-shared/vite.config.ts
@@ -3,6 +3,11 @@ import federation from '@originjs/vite-plugin-federation';

 // https://vite.dev/config/
 export default defineConfig({
+    server: {
+        port: 1333,
+        host: '0.0.0.0',
+        strictPort: true,
+    },
    plugins: [
        federation({
            name: 'shared',
--- a/front-end/main-app/package.json
+++ b/front-end/main-app/package.json
@@ -7,10 +7,9 @@
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
-    "dev": "vite --port 5000 --strictPort",
-    "serve": "vite preview --port 5000 --strictPort",
-    "build": "vite build",
-    "all": "npm run build && npm run serve",
+    "dev": "concurrently \"npm run build\" \"npm run serve\"",
+    "serve": "vite preview --port 1300 --strictPort",
+    "build": "vite build --watch",
    "type-check": "vue-tsc --build"
  },
  "dependencies": {
--- a/front-end/main-app/src/app/router/index.ts
+++ b/front-end/main-app/src/app/router/index.ts
@@ -1,7 +1,6 @@
 import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
 import {productRouter} from 'product/ProductRouter'

-console.log("productRouter: ", productRouter)

 const baseRouter: Array<RouteRecordRaw> = [
    {
--- a/front-end/main-app/vite.config.ts
+++ b/front-end/main-app/vite.config.ts
@@ -8,6 +8,11 @@ import federation from '@originjs/vite-plugin-federation';

 // https://vite.dev/config/
 export default defineConfig({
+  server: {
+    port: 1300,
+    host: '0.0.0.0',
+    strictPort: true,
+  },
  plugins: [
    vue(),
    vueJsx(),
@@ -15,11 +20,8 @@ export default defineConfig({
    federation({
      name: 'mainApp', // 主应用模块名（联邦模块需通过此名引用）
      remotes: { // 配置远程联邦模块地址（开发/生产需对应）
-        product: 'http://localhost:5001/assets/remoteEntry.js',
-        shared: 'http://localhost:5555/assets/remoteEntry.js'
-      },
-      exposes: {
-        "./productService": "./src/app/di/productModule.ts",
+        product: 'http://localhost:1301/assets/remoteEntry.js',
+        shared: 'http://localhost:1333/assets/remoteEntry.js'
      },
      shared: {
        vue: { requiredVersion: '^3.5.18' },