使用AntDesignPro + Electron构建一个桌面应用的实践

实际上Ant Design Pro和Electron的官网的start已经将各自构建应用的方式讲述的很明白了，本文主要讲解一下在AntDesignPro使用Electron构建一个桌面应用时所遇到的一些需要注意的重点，以及解决方式。

Happytoo_

1532人浏览 · 2024-05-17 11:19:29

Happytoo_ · 2024-05-17 11:19:29 发布

Electron

官网地址

Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

关键步骤

1、启动electron应用

1.创建应用

mkdir my-electron-app && cd my-electron-app

npm init

2.加入electron依赖

npm install --save-dev electron

在 package.json配置文件中的scripts字段下增加一条start命令：

{ "scripts": { "start": "electron ." }}

！！启动报错，没关系，因为有些配置还没加好，继续。

3.建立三个文件在你的根目录下：

main.js

const { app, BrowserWindow } = require('electron/main')

const path = require('node:path')

function createWindow () {

const win = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

preload: path.join(__dirname, 'preload.js')

}

})

win.loadFile('index.html')

}

app.whenReady().then(() => {

createWindow()

app.on('activate', () => {

if (BrowserWindow.getAllWindows().length === 0) {

createWindow()

}

})

app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit()

}

})

preload.js

window.addEventListener('DOMContentLoaded', () => {

const replaceText = (selector, text) => {

const element = document.getElementById(selector)

if (element) element.innerText = text

}

for (const type of ['chrome', 'node', 'electron']) {

replaceText(`${type}-version`, process.versions[type])

}

})

index.html

<!DOCTYPE html>

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<h1>Hello World!</h1>

<p>

We are using Node.js <span id="node-version"></span>,

Chromium <span id="chrome-version"></span>,

and Electron <span id="electron-version"></span>.

</p>

</body>

</html>

将main.js添加到package.json配置中

添加完毕后，终端执行 tnpm install && tnpm run start 将会启动一个下图样式的应用，证明启动成功了

2、打包成软件安装包

使用官方推荐的Electron Forge工具，网上还有electron-builder和electron-packger的一些配置应用，可以自行学习配置。

执行命令

npm install --save-dev @electron-forge/cli

npx electron-forge import

✔ Checking your system

✔ Initializing Git Repository

✔ Writing modified package.json file

✔ Installing dependencies

✔ Writing modified package.json file

✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

打包依赖配置，如果上述命令执行太慢(这块有点坑，从网上捞了很多教程，以下比较精简)，可以直接修改为如下依赖，重新tnpm install

package.json

{

"name": "mp-el-qc",

"version": "1.0.0",

"description": "first electron app",

"main": "main.js",

"private": true,

"scripts": {

"dev": "electron .",

"package": "electron-forge package",

"make": "electron-forge make",

"start": "electron-forge start",

"rebuild": "electron-rebuild"

"author": "gejiangbo",

"license": "MIT",

"devDependencies": {

"@electron-forge/cli": "^6.1.1",

"@electron/asar": "^3.2.4",

"@electron-forge/maker-dmg": "^6.1.1",

"@electron-forge/maker-rpm": "^6.1.1",

"@electron-forge/maker-squirrel": "^6.1.1",

"@electron-forge/maker-zip": "^6.1.1",

"electron": "^27.0.1"

"repository": {

"type": "git",

"url": "git+https://github.com/gejaingbo"

"bugs": {

"url": "https://github.com/gejaingbo"

"homepage": "https://github.com/gejaingbo",

"config": {

"forge": "./forge.config.js"

}

同时在根目录下添加forge的打包配置,注释部分主要是为了打包AntDesignPro,后边AntDesignPro构建好后可以打开。此处是为了打包出来应用安装包的体积服务。

forge.config.js

module.exports = {

packagerConfig: {

asar: true,

// dir: "./dist",

// ignore: [

// "node_modules",

// "myapp",

// ]

// asar: {

// unpack: ["node_modules/**/*","myapp/**/*"]

// }

makers: [

{

// Mac

name: '@electron-forge/maker-dmg',

// config: {

// background: './assets/dmg-background.png',

// format: 'ULFO', // (OS X 10.11+ only)

// icon: './icon.icns'

// }

}

]

}

3、配置好后，执行tnpm run make,等待构建即可。

AntDesignPro

官网地址

AntDesignPro是什么？

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。