共计 5501 个字符，预计需要花费 14 分钟才能阅读完成。
开篇词: 这是一篇快速实现 Hello World 并打包发布的教程。我们跳过吹捧它，因为你点开这篇文章，肯定你已经被 Electron 迷住了。
写这篇文章，我设想您是遇到了下面的问题：
想一次学习搭建开发环境、创建项目、编译打包成 exe 文件、想 Git 做版本管理、想 SemVer 做发布版本管理，而官方或者其他渠道找到的资料都是需要拼凑的。
尝试了几次，被各种拦路虎挡住，一个 Hello World 都没弄出来。
您将学到的知识点:
搭建开发环境
国内高速镜像
安装 Electron-forge 并自动创建项目
手工创建 Demo 项目
处理 loadFile…… is not function 报错
编译打包成 exe
Git 做开发版本管理
SemVer 做发布版本管理
一、简介
Electron 通俗点讲就是用 HTML、CSS、JavaScript 开发跨平台桌面应用。
专业介绍请看官网：https://electronjs.org/，但是不建议去看了，我想大家搜到 Electron 这个关键词，已经是在其他渠道被它迷住了，这里是直接来收干货的。
提示:
以下操作都是在 Windows10 系统上操作的，执行命令除了说明在 Visual Studio Code（没有 VSCode 的先安装：https://code.visualstudio.com/）的终端工具上执行的外，也可以是在操作系统自带的 CMD 命令行工具上执行的，但是编程 IDE 如果您有其他，也可以。
二、安装
安装 Node.js
下载并安装 Node.js（先确定要装哪个版本的 Electron，然后下载对应的 Node.js 版本，Windows 系统下载后直接下一步下一步安装即可，npm 包管理器会一起安装，npm 能从网上一个存软件包的仓库下载文件，简单高效，下面将用到它）。
安装 Electron
用 npm 包管理器安装 Electron (怕一夜都没装起来的朋友，请自动忽略这一步，跳到淘宝镜像那一步):
npm install -g electron
用淘宝镜像提速:
npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm install -g electron
-g 是全局安装，如果执行上一步提示了 npm 版本过低，用下面的代码升级。
npm install -g npm
PS：如果想不同项目使用不同版本的 Electron，则代码如下
安装 Electron-forge
Electron-forge 是 Electron 的一个脚手架，它可以自动生成项目文件，如果想手工搭建项目可以不安装，或者安装后暂时不用它。
cnpm install -g electron-forge
执行下面的代码则可以自动新建 demo 项目，它将在
D 盘创建两个文件夹，electron01 文件夹 在 electron 文件夹里面，如果想手工建立，请跳过这一步。
cd D:
mkdir electronelectron01
cd electronelectron01
electron-forge init electron01-1
启动项目
如果是想手工创建项目，请忽略这一步。
electron-forge start
三、手工新建 demo 项目
新建项目文件夹
这个文件夹，用来存放项目
cd D:
mkdir electronelectron01
cd electronelectron01
mkdir Electron01
创建文件
用 Visual Studio Code 软件来新建三个文件，这里不多说，跟微软其他软件新建文件一样，创建完以后，保存到 D:electronelectron01，目录是这样的。
项目文件夹 /
├── package.json
├── index.js
└── index.html三个文件之间的关系：index.html 是我们想要显示的页面，index.js 为此应用的入口，package.json 为 npm 项目的配置文件。
初始化 package.json
打开 Visual Studio Code 的终端
cd D:electronelectron01
npm init
然后一路回车，可以全部用默认，也可以改内容
创建完，我这里显示如下，其中版本我改了一下
{
“name”: “electron01”,
“version”: “0.1.0”,
“description”: “test”,
“main”: “index.js”,
“author”: “qian”,
“license”: “ISC”,
“scripts”: {
"test": "echo \"Error: no test specified\"&& exit 1"}
}
在 index.js 里写代码
const {app,BrowserWindow} =require（’electron’)
// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收，window 会被自动地关闭
let mainWindow
function createWindow(){
// 创建浏览器窗口
mainWindow = new BrowserWindow({width:10247,height:768})
// 载入 index.html
mainWindow.loadFile(‘./index.html’)
}
app.on(‘ready’,createWindow)
在很多地方看到 mainWindow.loadFile(‘./index.html’) 的写法，但是会报错，英应为下面的代码，注意不是单引号，是键盘 ESC 键下面的那个，并且注意是要英文输入法下输入。
mainWindow.loadURL(file://${__dirname}/index.html)
在 index.html 里写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 第一个 electron 测试项目 </title>
</head>
<body>
<h1> 这是我的第一个 ELECTRON 练习项目 </h1>
</body></html>
运行项目
打开 Visual Studio Code 的终端
cd D:electronElectron01
如有已经在就不用切换目录
启动项目
electron .
则会打开一个 PC 应用界面
如果报下面的错误
图片: https://uploader.shimo.im/f/t…
将 index.js 里面的 mainWindow.loadFile(‘./index.html’) 改为下面的代码
mainWindow.loadURL(file://${__dirname}/index.html)
四、打包
安装 Electron-prebuilt
它是一个 Electron 的预编译版本
npm install -g electron-prebuilt
安装 Electron-packager
它也是一个用于打包 Electron 应用的工具
npm install -g electron-packager
打包
3.1 在 Visual Studio Code 的终端里输入打包命令
/*
格式这样
electron-packager < 应用目录 > < 应用名称 > < 打包平台 > –out < 输出目录 > < 架构 > < 应用版本 >
electron-packager . < 应用名称 > –win –out ../< 输出目录 > –arch=x64 位还是 32 位 –electron-version= 版本号 –overwrite –ignore=node_module
electron-version=5.0.0 <- 是 electron 的版本号
–overwrite <- 是覆盖
–ignore=node_module <- 忽略
*/
electron-packager . electron01 –win –out ../myApp –arch=x64 –electron-version=5.0.0 –overwrite –ignore=node_module
3.2 也可以将打包命令写到 package.json 文件里
“scripts”: {
"test": "echo \"Error: no test specified\"&& exit 1"
"package":"electron-packager . electron01 --win --out ../myApp --arch=x64 --electron-version=5.0.0 --overwrite --ignore=node_module"}
然后在 Visual Studio Code 的终端里执行如下命令
npm run-script package
上面两步的任何一步，执行完毕后，看到父级目录下已经产生了我们希望看到的应用文件夹，双击里面的应用程序 electron01.exe 就可以直接打开桌面应用了。
图标
如果我们想要更改窗口左上角的图标和任务栏的图标，只需要在打包的命令上加个 icon 参数就好了。
electron-packager . electron01 –win –out ../myApp –arch=x64 –version=0.1.0 –electron-version=5.0.0 –overwrite –ignore=node_module –icon=./app/img/icon.ico
生成安装包
5.1 使用 NSIS（https://www.cnblogs.com/modou…）。
5.2 使用火凤（www.hofosoft.cn），这个比较简单，但是可控项目少。
五、开发版本控制
这里我们用 Git 进行版本控制，它是 Linux 创始人 Linus Benedict Torvalds 的第二神作，其他版本控制可以放弃。
想深学更多 Git，请看 Git 教程：https://www.liaoxuefeng.com/w…，不过今天不建议你点进去，后面再说，今天还不用去学这个，不过它是必学。
下载 Git 客户端：
https://www.git-scm.com/downl…
安装 Git 客户端
设置用户和邮箱
安装后，在 Windows 开始菜单找到并启动 Git Bash，设置用户和邮箱，执行下面的命令。至于为什么要要设置这个，暂时可以不管，如果要看为什么，看上面的 Git 教程。
git config –global user.name “Your Name”
git config –global user.email “email@example.com”
生成仓库
在项目目录下右键，启动 Git Bash Here，并执行命令。
git init
这时将生成一个 git 文件夹，这个目录是 Git 用来跟踪管理版本库的，里面的东西不要手动去修改。
PS：解释一个谜团，所有的版本控制系统，其实只能跟踪文本文件的改动，另外文本是有编码的，如果没有历史遗留问题，建议统一用 UTF-8（VSCode 新建的文件默认了 UTF-8，在右下角可以看到），另外不要用 Windows 的记事本，就算设置为 UTF-8 也不要用，具体原因可百度。而图片、视频这些二进制文件，虽然也能由版本控制系统管理，但没法跟踪文件的变化，只能把二进制文件每次改动串起来，也就是只知道图片从 10KB 改成了 30KB，但到底改了啥，版本控制系统不知道。
提交文件到仓库
初始化好 git 仓库，我们将文件夹下的文件添加到 git 仓库。
第一步：在项目文件夹下右键，启动 Git Bash Here（如果上一步你关了的话才要重新启动），用 git add 命令告诉 Git，把文件添加到仓库，如果是所有文件，用点（.）表示，下面有两种代码，选一种。
git add 文件名. 后缀
git add .
执行后没有什么提示，那就正确了，没有提示就是最好的提示。
第二步：用 git commit 命令告诉 Git，把文件提交到仓库，提交一次一个版本，后续可以回滚。
git commit -m “ 提交备注 ”
PS：如果你对提交为什么要两步，先 add 后 commit 的设计有疑问，请看上面的 Git 教程，备注也是重中之中，千万不要写一些没有意义的字符，不然后面可能会哭，正确的做法是简要描述你本本次提交里面改了或者新增了什么，不然可能就像你曾经抓狂过的 Excel 或 Word 文件的命名，当编辑时要记录多版本可能你会看到的：最后一个版本、最最后一个版本、最最最后一个版本等等或者版本 1、版本 2、版本 3 等等。
将文件同步到 GitHub 或码云
前面我们已经将本地仓库的版本管理已经搞定，如果要同步到网络上，比如 GitHub 或者码云进行多人协作或者类似云盘备份，则请继续，如果目前只是一个人管理一个项目或者暂时不想学习，可以忽略这一节，因为这一步，稍微有点耗时，可能会打断你一次性学完本教程，但是这一步对于开发来说是必学的。
码云：https://gitee.com/
PS：私有仓库也免费，生态差一点
GitHub：https://github.com
PS：私有仓库收费，生态比较好
六、生产版本管理
生产版本管理，这里不再赘述，下面链接里的教程很容易看懂，就是 1.1.1，每一位不是随便去编的，要根据规则来。
生产版本建议参考：https://semver.org/lang/zh-CN/
Electron 遵循：https://electronjs.org/docs/t…
来个小项目
设计一个文本编辑器
一、需求分析
二、创建初始项目
使用 electron-forge 生成一个项目 NOTEAPP
mkdir myapp
cd myapp
electron-forge init NOTEAPP
electron-forge 打包操作：https://www.jianshu.com/p/51a…
设计一个音乐播放器
