Question

打包桌面MxCAD APP

我们提供了electron版本来实现桌面应用。对于electron版本，前端二次开发的插件(就是上述MxCAD目录生成的js文件)没有任何变动,我们只需要将dist/plugins下对应的js脚本复制到现在下载解压的electron项目的dist/2d/dist/plugins目录下将其覆盖。

此外，electron版本在window上新增了MxElectronAPI对象, 提供了和主线程通信的能力，我们可以在写前端二次开发的插件时通过MxElectronAPI来判断是否是electron环境。我们还可以基于vite 打包，用ts文件编写electron项目自己的插件，用于electron主线程的一些二次开发需求。

1. 点击下载electron项目

2. 解压后，安装依赖npm install然后运行npm run dev启动electron项目

3. 创建src/plugins 目录， 如果存在则无需创建

4. 创建一个插件目录 如testPlugin目录, 然后在该目录下创建一个index.ts作为该插件入口文件

5. vite.plugins.config.ts 新增插件入口配置pluginEntryFileName: ["plugins/testPlugin/index.ts"]

6. 运行命令调试: dev:plugins

7. 运行命令打包: build:plugins

如果在 testPlugin 创建 preload.ts 并默认导出一个对象，这个对象存放是用来与页面通信的API。这里的preload.ts是预加载脚本，如果比较难理解可以参考预加载脚本：https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload，其默认导出的对象就是在通过contextBridge.exposeInMainWorld定义的前端 window.MxElectronAPi.插件目录名称(命名空间)对象， 如现在创建的testPlugin目录，那么前端访问就是window.MxElectronAPi.testPlugin 就是这个默认导出的对象。

同理preload2d.ts导出的对象会覆盖preload.ts导出对象中属性相同的值,但是preload2d.ts只在显示2d图纸的页面中有效。preload3d.ts与preload2d.ts不同的是它只作用于3d显示的页面。

其中，plugins可以存在很多插件， 它下面的每一个目录都是一个插件，这个插件的目录名就是命名空间名称。 前端页面访问的对象也是退window.MxElectronAPI. 命名空间名称。

在electron项目插件的ts文件中，我们保留了mxAppContext上下文，你可以通过 global.mxAppContext访问，目前挂载了几个属性和方法: getMainWindow，showMessage，showMessageBoxSync，MainTabs。它们在ts中有对应的类型提示和说明。

以下electron项目中对应目录的描述： | 路径 | 描述 | 提醒 | |-------|-------|-------| | dist | 前端打包的项目资源 | 目录下有2d、3d等目录，其中2d和3d内还存在一个dist目录， 这个dist目录就是上文中提到的打包后前端资源，不过它是electron版本，但是目录结构是一模一样的， 我们只需要把上文中的生成的dist/plugins/test.js覆盖掉electron版本中对应dist/plugins/test.js, 然后查看config.json中是否存在对应的配置 | | dist-electron | 主线程打包的代码 | 不建议直接修改这里的代码，因为随时都可能更新替换 | | rendererTypes | window.MxElectronAPI的ts类型定义 | 可以在前端使用，提供类型定义和说明描述 | | src/plugins | 插件目录 | 每一个目录下的index.ts都是入口 | | vite.plugins.config.ts | vite的打包配置 | 每一个新的创建目录都要在这里记录，如果你稍微了解vite打包那么可以根据自己的需求作出调整， 但是最终输出文件的结构位置一定不可以变，不然无法加载插件 |

对于有二次开发需求现有配置或者插件无法满足时，可以给我们反馈，后续会逐步完善。

electron 桌面应用截图：