react项目引入electron进行mac、windows桌面应用打包，通过浏览器下载安装包

打包步骤

全局安装electron

npm install electron -g

在react项目的根目录中，创建一个新的文件夹electron，用于存放electron相关的文件
在该文件夹中，创建一个新的package.json文件，并添加以下内容：

{"name": "example", // 应用名称"version": "1.0.0", // 应用版本号"main": "main.js", // 主入口文件"scripts": {"start": "electron-forge start", // 启动应用的命令"dist:mac": "electron-builder build --m", // 打包mac应用程序的命令"dist:win": "electron-builder build --w " // 打包windows应用程序的命令},"author": "xxx", // 作者"license": "xxx-1.0", // 许可证"build": {"appId": "com.example.app", // 应用ID"productName": "example", // 应用名称"directories": {"output": "release-builds", // 打包输出目录"buildResources": "public" // 构建资源目录},"afterSign": "afterSign.js", // 签名后执行的脚本"nsis": { // NSIS安装程序配置"installerIcon": "./public/icons/favicon.ico", // 安装程序图标"uninstallerIcon": "./public/icons/favicon.ico", // 卸载程序图标"installerHeaderIcon": "./public/icons/favicon.ico", // 安装程序头部图标"oneClick": false, // 是否一键安装"language": "2052", // 安装程序语言"installerLanguages": ["zh-CN" // 安装程序支持的语言],"perMachine": true, // 是否为每台机器安装"allowToChangeInstallationDirectory": true, // 允许更改安装目录"createDesktopShortcut": true, // 创建桌面快捷方式"createStartMenuShortcut": true, // 创建开始菜单快捷方式"shortcutName": "阿拉丁AI" // 快捷方式名称},"files": ["**/*","!node_modules/electron-*","!node_modules/electron-builder","!node_modules/electron-prebuilt-compile","!node_modules/electron-edge-js/**/*"], // 打包时需要包含的文件和排除的文件"dmg": { // DMG安装包配置"iconSize": 100, // 图标尺寸"contents": [{"x": 380,"y": 180,"type": "link","path": "/Applications" // 链接到Applications目录},{"x": 130,"y": 180,"type": "file" // 文件}],"window": {"x": 100,"y": 100,"width": 500,"height": 300 // DMG窗口尺寸}},"mac": {"category": "public.app-category.utilities", // 应用程序所属的类别"target": [{"target": "dmg", // 目标为生成dmg安装包"arch": ["arm64", // 支持arm64架构"x64" // 支持x64架构]},"zip" // 目标为生成zip压缩包],"icon": "./public/icons/favicon.icns", // 应用程序的图标路径"notarize": {"teamId": "xxxxxx" // 用于应用程序的代码签名的团队ID}},"win": {"target": [{"target": "nsis", // 目标为生成NSIS安装包"arch": ["ia32", // 支持ia32架构"x64" // 支持x64架构]},"zip" // 目标为生成zip压缩包],"icon": "./public/icons/favicon.ico" // 应用程序的图标路径}},"devDependencies": {"@electron-forge/cli": "^7.3.0","@electron-forge/maker-deb": "^7.3.0","@electron-forge/maker-rpm": "^7.3.0","@electron-forge/maker-squirrel": "^7.3.0","@electron-forge/maker-zip": "^7.3.0","@electron-forge/plugin-auto-unpack-natives": "^7.3.0","@electron-forge/plugin-fuses": "^7.3.0","electron": "^28.2.1","electron-builder": "^24.12.0"},"dependencies": {"electron-log": "^5.1.1","electron-notarize": "^1.2.2","electron-squirrel-startup": "^1.0.0"}
}

在同一文件夹中，创建一个新的main.js文件，并添加以下内容：

const { app, BrowserWindow } = require('electron')function createWindow () {const win = new BrowserWindow({width: 1280,height: 800,webPreferences: {devTools: true, //是否开启 DevToolsnodeIntegration: true}})win.loadURL('http://localhost:3000') // 请替换为你的react项目的URL// 隐藏客户端默认菜单Menu.setApplicationMenu(null);// 解决应用启动白屏问题win.on("ready-to-show", () => {win.show();win.focus();});// 打开开发者工具// win.webContents.openDevTools()
}app.whenReady().then(createWindow)app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}
})

在终端中，进入到该文件夹，并运行以下命令来安装依赖：

npm install

接下来，运行以下命令来启动Electron应用程序：

npm run start

进行mac签名公证
参考 MacOS的打包、签名、公证、上架和 electron mac 打包、分发流程（dmg & mas）
在同一文件夹中，创建一个新的afterSign.js文件，并添加以下内容：

const { notarize } = require('electron-notarize');
const path = require("path")
exports.default = async function notarizing(context) {const { electronPlatformName, appOutDir } = context;if (electronPlatformName !== 'darwin') {return;}const appName = context.packager.appInfo.productFilename;const appPath = path.join(appOutDir, `${appName}.app`);return await notarize({appBundleId: ‘apple开发者中该应用的bundleid',appPath,//打包后的放置app文件的命名和路径appleId: “开发者账号",appleIdPassword: "app专属密码”,//在apple开发者里可以对某个app设置专属密码});
};