web_mods_base

基于 Electron 实现的前端模组化客户端模板，使用类似微前端的模式进行不同框架项目之间的协同与管理，采用浏览器用户交互模式进行框架设计。

@TODO

electron/store.ts 用于存储全局数据信息
新开窗口与主窗口、窗口间、主窗口间通用 IPC
404/401/403 等状态提示组件
导航栏、登录 开发
工具栏扩展，比如：加载 URL、计算器等
安装卸载、配置操作等全局管理模块 开发
...

主程序 Technology Stack

React 17.x
Redux+Toolkit
TypeScript
Scss/Less
Ant Design 5.x
Vite 4.x
Electron
EsLint
Prettier
Husky

DevEnvTips: (node >= 14.20.0)、(npm >= 8.0.0)、(git >= 2.30.0)

Start

npm install or npm run init

若 husky hooks 安装失败，请检查是否已进行 git init 。

注意：若代码标红提示，请检查是否因为 npm 版本过低，导致安装了 react18 的声明文件。可以使用 npm install --no-optional 来避免安装 react18 的声明文件。或者直接升级 npm 版本

Development

npm run dev

Preview

npm run preview

Build

npm run build

Code Check

npm run lint

Docs

模块开发说明

模块开发时必须在 package.json 中添加以下配置项

{
  "name": "header", // 模块项目名称与 id，全局唯一，需与目录名保持一致。（为保证后续其他系统平台扩展，name 只能使用字母数字与下划线）
  "displayName": "Header模块", // 模块显示的名称
  "description": "Header模块，用于展示用户信息等。", // 模块的功能描述
  "version": "1.0.0", // 模块的版本信息
  "module_config": { // 模块的配置
    "type": "CORE", // 模块类型，CORE-核心模块 COMMON-通用模块 PROJECT-单独新开窗口的模块 MOD-普通模块
    "devURL": "http://localhost:9903", // 模块的开发环境入口地址
    "prodPath": "index.html", // 模块的生成环境入口地址，若多层请添加目录，比如 dist/index.html。
    "platform_version": "1.0.0",  // 模块依赖的最低平台版本-即本项目的最低版本
    "depends": ["login"],  // 模块依赖的其他模块，没有则不填。
    "project": "biugle_core" // 对应模块的 type 分组，方便后续显示。
  }
}

模块入口目录必须包含上面的 package.json，如果模块需要打包，需同时将 package.json 复制到模块的打包目录。
模块开发时可以使用主窗口的 contextBridge-xIpc（参考 main\declare\global.d.ts）进行主窗口以及模块间的通讯与交互，禁止模块引入 electron api。
- 包括读取所有模块信息
- 获取模块加载地址
- 控制窗口变化、数据等等等
window.xIpc.getModules() 数据预览，数据均为实时读取生成，以下仅为参考，具体以实际数据为准。

{
    "modulesMap": {
        "authenticator": {
            "name": "authenticator",
            "displayName": "认证模块",
            "description": "认证模块，用于身份认证。",
            "version": "1.0.0",
            "module_config": {
                "type": "CORE",
                "devURL": "http://localhost:9901",
                "prodPath": "index.html",
                "platform_version": "1.0.0",
                "project": "biugle_core"
            }
        },
        "footer": {
            "name": "footer",
            "displayName": "Footer模块",
            "description": "Footer模块，用于展示版权等信息。",
            "version": "1.0.0",
            "module_config": {
                "type": "CORE",
                "devURL": "http://localhost:9904",
                "prodPath": "index.html",
                "platform_version": "1.0.0",
                "project": "biugle_core"
            }
        },
        "header": {
            "name": "header",
            "displayName": "Header模块",
            "description": "Header模块，用于展示用户信息等。",
            "version": "1.0.0",
            "module_config": {
                "type": "CORE",
                "devURL": "http://localhost:9903",
                "prodPath": "index.html",
                "platform_version": "1.0.0",
                "project": "biugle_core"
            }
        },
        "navigation": {
            "name": "navigation",
            "displayName": "导航栏",
            "description": "导航栏，用于展示已安装的 MOD 模块。",
            "version": "1.0.0",
            "module_config": {
                "type": "CORE",
                "devURL": "http://localhost:9902",
                "prodPath": "index.html",
                "platform_version": "1.0.0",
                "project": "biugle_core"
            }
        },
    },
    "modulesList": [
        {
            "dirname": "authenticator",
            "modulePath": "F:\\WORKSPACINGGGGGG\\web_mods_base\\build\\modules\\authenticator",
            "pkgPath": "F:\\WORKSPACINGGGGGG\\web_mods_base\\build\\modules\\authenticator\\package.json",
            "name": "authenticator",
            "displayName": "认证模块",
            "description": "认证模块，用于身份认证。",
            "version": "1.0.0",
            "module_config": {
                "type": "CORE",
                "devURL": "http://localhost:9901",
                "prodPath": "index.html",
                "platform_version": "1.0.0",
                "project": "biugle_core"
            }
        },
        {
            "dirname": "footer",
            "modulePath": "F:\\WORKSPACINGGGGGG\\web_mods_base\\build\\modules\\footer",
            "pkgPath": "F:\\WORKSPACINGGGGGG\\web_mods_base\\build\\modules\\footer\\package.json",
            "name": "footer",
            "displayName": "Footer模块",
            "description": "Footer模块，用于展示版权等信息。",
            "version": "1.0.0",
            "module_config": {
                "type": "CORE",
                "devURL": "http://localhost:9904",
                "prodPath": "index.html",
                "platform_version": "1.0.0",
                "project": "biugle_core"
            }
        },
        {
            "dirname": "header",
            "modulePath": "F:\\WORKSPACINGGGGGG\\web_mods_base\\build\\modules\\header",
            "pkgPath": "F:\\WORKSPACINGGGGGG\\web_mods_base\\build\\modules\\header\\package.json",
            "name": "header",
            "displayName": "Header模块",
            "description": "Header模块，用于展示用户信息等。",
            "version": "1.0.0",
            "module_config": {
                "type": "CORE",
                "devURL": "http://localhost:9903",
                "prodPath": "index.html",
                "platform_version": "1.0.0",
                "project": "biugle_core"
            }
        },
    ]
}

模块之间的数据交互统一在主窗口进行
模块开发可以在 modules 下进行，也可以单独开发，后续只需打包完成后放在 modules 目录下即可。
- 建议使用 git submodules 进行统一管理
目前主窗口与主程序均为开发者自己编写绘制，若改动需 UI 配合重新设计。
禁止泛滥引入插件，非必需插件不引入，能自己写就自己写，确保可控性。
更多问题疑问联系开发者

biugle / web_mods_base Goto Github PK

web_mods_base's Introduction

web_mods_base

@TODO

主程序 Technology Stack

Start

Development

Preview

Build

Code Check

Docs

模块开发说明

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent