Modern Electron 简介

Modern Electron 是基于 Electron 的桌面端应用框架，它帮助我们：

• 创建基本的工程。包含：基本的目录结构组织、相关 CLI（启动、构建）。
• 协助我们开发，减少重复建设工作，降低开发复杂度。提供：窗口管理、进程通信、升级等相关通用服务。
• 简化工程化复杂度，降低工程化门槛。提供：简化后的构建配置、不同进程的构建命令。
• 支持一套代码，多端发布（Web 端和桌面端）。可以接入任意 Web 项目，零成本转为桌面应用，并做持续开发集成。
• 提供测试框架，支持功能性代码的测试。比如：测试功能函数、进程通信、多应用实例之间交互流程等。

主要由以下部分组成：

• cli：底层开发工具，在整个开发流程中有着不可或缺的作用。
  • 本地开发、代码构建、应用打包。
• runtime：提供窗口管理、进程通信、应用升级、生命周期管理等能力。
• bridge：提供安全、可靠的通信 bridge，简化了通信机制的同时，也保证了项目安全性。
• test：测试框架，支持功能性代码的测试。比如：测试功能函数、进程通信、多应用实例之间交互流程等。

整体架构

适用人群

• 零桌面端基础的 web 前端开发者。
• 有一定桌面端经验，希望提升项目可维护性、安全性、稳定性的高级前端开发。

创建项目

npx @modern-js/create@modern-1 test_modern_electron

  npx @modern-js/create@modern-1 test_modern_electron
  npx: 1 安装成功，用时 7.108 秒
  ? 请选择你想创建的工程类型 应用
  ? 请选择开发语言 TS
  ? 请选择包管理工具 pnpm
  ? 是否需要支持以下类型应用 Electron
  ? 是否需要调整默认配置? 否

执行后我们可以得到以下产物：

├── README.md
├── config
│   └── electron
│       ├── entitlements.mac.plist # mac 权限配置文件
│       ├── icon.icns # mac 应用图标
│       ├── icon.ico # windows 应用图标
│       └── logo.png
├── electron
│   ├── main.ts #  主进程入口文件
│   ├── modern-app-env.d.ts
│   └── tsconfig.json
├── modern.config.js # 框架配置文件
├── package.json
├── pnpm-lock.yaml
├── src # 前端
│   ├── App.css
│   ├── App.tsx
│   └── modern-app-env.d.ts
└── tsconfig.json

启动

在package.json中添加一下命令：

"dev": "modern dev" # 启动渲染进程,
"dev:main": "modern dev electron-main" # 启动主进程,
"dev:electron": "modern dev electron" # 语法糖，同时启动渲染进程和主进程,

参考【启动命令】。

为主入口添加逻辑

修改electron/main.ts文件，增加代码逻辑：

import { app } from 'electron';
import Runtime, { winService } from '@modern-js/runtime/electron-main';

 const runtime = new Runtime({
    windowsConfig: [{
      name: 'main',
    }],
    mainServices: {
    openWindow: (winName: string) => {
      return winService.createWindow({ name: winName })
    }
  },
});

app.whenReady().then(async () => {
  await runtime.init();
  winService.createWindow({
    name: 'main',
  })
});

打包

"build": "modern build" # 构建渲染进程,
"build:main": "modern build electron-main" # 构建主进程,
"build:app": "modern build electron-app" # 构建安装程序,
"build:electron": "modern build electron" # 语法糖，按顺序构建渲染进程、主进程、安装程序,

补充信息

更多关于【打包命令】。