[玩转electron系列]纯 ts 从零完成 electron 的搭建和构建

procstu

已于 2022-06-08 10:11:57 修改

阅读量4.1k

点赞数 2

文章标签： electron javascript 前端

于 2022-05-31 11:23:21 首次发布

本文链接：https://blog.csdn.net/procstu/article/details/125059776

版权

最近公司想搞 electron，我来之前其实有搞过，不过也就做得应付了事。现在有时间了，就想让我规范化起来。

electron 简介

官方描述：

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

从官方的描述当中，总结出来一些做 electron 之前需要熟悉的基本知识

node.js
javascript
html
css

以上只是基本要求，若是在公司里面做项目开发，以下基本前端知识还是要熟悉

前端框架，angular/react/vue，根据具体项目选定
typescript，这年头还有做前端不会 ts 的吗？
sass/less/scss的一种，一般less比较多
material design / ant-design，基本各厂会根据设计师要求制作自己的组件库
npm/yarn
git

对 electron 有了大概的了解，且一些基本工作准备就绪，就可以开始了

纯 ts 搭建 electron

首先声明一下我的环境：

系统:windows
node: v16.15.0
yarn: 1.22.18

创建 package.json

yarn init

注意

author 和 description 两个字段必须写一些东西，空字符串也不行。这是因为在后续的构建会需要这两个字段。虽然构建时的报错写得还算清晰，但连官网都提示了这两个字段的重要性，我们就照着做就好了。
main字段需修改为 out/electron-app.js

设置 electron 镜像源，下载 electron 和其他依赖

项目根目录创建 .yarnrc 文件，内容如下：

# default mirror
registry https://registry.npm.taobao.org/

# electron relatives files are downloaded from taobao mirror
electron_mirror "https://npm.taobao.org/mirrors/electron/"
ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/

若不指定，electron 下载是从外网下的，比较慢，且可能会出错。包括后续需要的 electron-builder 在下载过程中有一些 binary 是从 github下的，比较慢。换成淘宝的镜像源就快多了。

我用的是 yarn, 所以写的是 .yarnrc，若使用的是 npm, 则写 .npmrc 是一样的。

yarn add electron -D
yarn add @types/electron -D
yarn add typescript -D
yarn add @types/node -D

创建各 electron 所需文件

electron 主进程文件 electron-main.ts

import {
   BrowserWindow, app, ipcMain, dialog} from 'electron'
import {
   join} from 'path'
import {
   ElectronChannel} from './ipc'

export const main = () => {
   
    onReady('dev')
    appListens()
}

const onReady = (type: 'dev' | 'prod') => {
   
    app.whenReady().then(() => {
   
        const mainWindow = createWindow(type)
        mainWindowListens(mainWindow)
    })
}

const mainWindowListens = (mainWindow: BrowserWindow