记录我创建第一个 electron 应用的历程

最近，我想动手写一个简单的桌面版工作列表，来提升工作效率。首先想到的就是听过但未曾用过的 electron。万事开头难，就先用它写个 "HelloWorld!" 吧。

基本环境

本人的机器是 Windows10 64位系统，使用 nvm 安装了最新的 20.11.1 版本的 nodeJs。这是基本环境。

node 与 npm

在新版的 nodeJs 中，找到 npm 的源配置文件(通常位于 C:>Users>您的用户名>.npmrc)，然后添加以下配置，把 npm 的下载源指向淘宝源。

registry=https://registry.npmmirror.com
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
electron_mirror=https://npmmirror.com/mirrors/electron/

搭建脚手架

执行命令行命令

npm init

生成以下 pageckage.json 配置

{
  "name": "czy-helloworld",
  "version": "1.0.0",
  "description": "My first Hello World!",
  "main": "main.js",
  "author": "ChenZhongyi",
  "license": "MIT"
}

再执行以下命令安装 electron 基本框架。如果安装失败(例如碰到 Failed to install modules: ["electron-squirrel-startup"] 这样的错误信息)，请检查您的 .npmrc 配置是否正确指向了淘宝源。

npm install --save-dev electron

有了基本的 electron 脚手架，接下来就可以考虑打包应用的问题了。首先安装 @electron-forge/cli：

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

接着把 forge 引入到当前脚手架中以方便打包应用：

npx electron-forge import

完成真正的 Hello world

能顺利走到这里，说明你的环境已经没有问题了，接下来就是去往 Electron's QuickStart 去完成您的 Hello world 应用啦！