蚂蚁笔记 Windows 客户端编译运行和打包

独立观察员

发布于 2024-01-17 15:14:07

2420

发布于 2024-01-17 15:14:07

文章被收录于专栏：独立观察员博客独立观察员博客

蚂蚁笔记 Windows 客户端编译运行和打包

独立观察员 2024 年 1 月 14 日

一、官方步骤（增强）

1. 安装 Electron v12.0.2

下载地址：https://github.com/electron/electron/releases/tag/v12.0.2

或：https://gitee.com/DLGCY_Clone/leanote-desktop-app/releases/tag/v2.7.0-alpha

下载后解压到 D 盘，然后把路径添加到环境变量中：

2. 通过 electron 运行

a、下载项目

https://gitee.com/DLGCY_Clone/leanote-desktop-app

b、安装依赖

$> cd PATH-TO-LEANOTE-DESKTOP-APP
$> npm i

[讯飞星火]：

“npm i” 是 “npm install” 的简写，主要用于安装项目所需的模块和依赖。在实际操作中，这两个命令基本上是等价的，都能完成 node_modules 文件夹的创建和包的安装。然而，它们之间还是存在一些细微的差别。例如，使用 “npm i” 安装的模块在某些情况下可能无法用 “npm uninstall” 命令删除。此外， “npm i” 还有帮助检测与当前 Node.js 版本最匹配的 npm 版本号的功能。同时，它也有一些后缀参数，如 “npm i module_name” 用于将模块安装到项目目录下，而 “npm i module_name -g” 则表示将模块安装到全局。

c、使用 gulp 解析 less

$> cd PATH-TO-LEANOTE-DESKTOP-APP/dev
$> npm i
$> gulp dev

gulp dev 命令需要在 dev 目录以管理员身份运行命令行窗口然后运行。不执行此命令的话样式会缺失。

d、通过 Electron 运行

$> cd PATH-TO-LEANOTE-DESKTOP-APP
$> electron .

成功启动：

二、[供参考] electron 方式（运行）

参见：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

cd 到 app 目录（源码根路径）

完善 package.json 信息：

npm init

将 electron 作为项目开发依赖进行安装：

npm install --save-dev electron@12.0.2

是的，”npm install –save-dev electron@12.0.2″ 是一个正确的指令。这个命令会将 Electron 的版本 12.0.2 作为开发依赖安装在你的项目中。在指令中，“npm install” 是安装模块的命令，“–save-dev” 参数表示将模块添加为开发依赖，最后的 “electron@12.0.2” 则是需要安装的模块和其版本号。你可以通过输入 “electron -v” 来查看 Electron 是否已经成功安装。如果 Electron 已经成功安装，该命令将会显示出 Electron 的版本号。如果在安装过程中遇到任何问题，如网络问题导致安装失败，你可以尝试切换网络或稍后再进行安装。（内容由讯飞星火 AI 生成）

可能会有一些关于包版本等的提示，选择修复：

npm audit fix --force

可以更新一些包，比如：

对于 nedb 库，可以将其更新到最新版本，因为新版本已经修复了 Prototype Pollution 和 Arbitrary Code Execution 漏洞。可以使用以下命令来更新：npm update nedb 对于 underscore 库，也需要更新到最新版本，因为新版本已经修复了 Arbitrary Code Execution 漏洞。可以使用以下命令来更新：npm update underscore 更新完成后，再次运行 npm audit 命令，确保没有其他漏洞存在。（内容由讯飞星火 AI 生成）

package.json 中添加启动指令：

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

启动：

npm start

注意：这种方式只能以这种命令启动，直接使用 electron . 则会报指令不存在（如果要直接使用 electron 指令，可将其添加到系统环境变量中）。

三、electron-forge 方式（打包）

这种方式不光可以运行，还可以打包。

3.1、安装依赖包

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

--save-dev 是 npm 的一个命令行选项，用于将指定的包作为开发依赖项安装到项目中。

在 npm install --save-dev electron 中，electron 是要安装的包名，而 --save-dev 则表示将其作为开发依赖项进行安装。

开发依赖项是指那些仅在开发过程中使用的包，它们通常包含用于测试、构建或代码转换的工具。与生产依赖项不同，开发依赖项不会直接包含在最终发布的应用程序中。

通过使用 --save-dev 选项，可以将所需的包添加到项目的 package.json 文件的 devDependencies 部分中。这样，其他开发人员在克隆项目并运行 npm install 时，也能够自动获取这些开发依赖项。

以下是一个示例的 package.json 文件片段，展示了如何使用 --save-dev 选项来添加一个开发依赖项：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^版本号"
  }
}

在上面的示例中，electron 被添加到了 devDependencies 部分，并且其版本号以 ^ 符号开头，表示允许安装该版本的任何修订版。

（内容由讯飞星火 AI 生成）

还有个 npm fund 解释一下：

“npm fund” 是一个 npm 命令，它的主要功能是为维护 npm 的开发人员（为 Node.js 创建包）提供一种方式来声明元数据，从而让愿意的捐赠者知道向哪里进行捐赠。在 package.json 文件中，开发者可以添加一个名为 “funding” 的字段，该字段中会列出各种模块设置和依赖项。其中，”funding” 字段可以链接到在线捐赠服务的 URL，比如 Patreon、Open Collective、GitHub Sponsors、License Zero 或者其他支付网站。当应用程序程序员使用这些包时，他们可以通过运行 “npm fund” 命令来为指定的包的作者进行捐赠。执行这个命令后，用户的默认浏览器将会打开指定的捐赠服务链接，从而方便用户进行信用卡捐赠等操作。（内容由讯飞星火 AI 生成）

3.2、将项目导入到 Electron Forge

npx electron-forge import

npx electron-forge import 是一个用于将项目导入到 Electron Forge 的脚本。它会自动检测项目中的入口文件（如 main.js、index.js 等），并创建一个基本的 Electron 应用程序结构。

使用方法如下：

1、首先确保已经安装了 Electron Forge，如果没有安装，可以通过以下命令进行安装：

npm install -g @electron-forge/cli

2、在项目根目录下运行 npx electron-forge init，这将生成一个基本的 Electron 应用程序结构。

3、接下来，使用 npx electron-forge import 命令将项目导入到 Electron Forge。例如，如果你的项目入口文件是 main.js，则可以运行：

npx electron-forge import main.js

4、等待导入完成，你将在项目根目录下看到一个名为 dist 的新文件夹，其中包含了导入后的 Electron 应用程序。（[dlgcy] 并没有看到 dist 文件夹）

（内容由讯飞星火 AI 生成）

3.3、运行

Electron Forge 向 package.json 中的 scripts 节点中添加了三个指令：start、package、make。如下图所示，如果使用 VS Code 打开的话，鼠标光标点中某个命令，会弹出一个悬浮窗，能直接点击上面的 “运行脚本” 或 “调试脚本” 来执行相应的命令。（这个不局限于本节这种情况，之前介绍的情况也可以用这种方式快速启动）

比如，在 start 命令上点击 “运行脚本” 的效果如下，可以看到执行的是 npm run start ：

而如果点击的是 “调试脚本”，可以看到执行的指令是一样的，不过没有 “正在执行任务” 等字样，而且多了一些 “Debugger attached” 等字样：

当然，也可以直接手敲指令（npm start）来启动，可以看到是调试模式：

本来以为指令中不带 run 就是调试模式，带 run 就是普通模式，然后发现好像并不是这样，带 run 时也附加了调试器（以下也是手敲指令执行的结果）：

来看看讯飞星火怎么说：

“npm start” 和 “npm run start” 在功能上并无区别。它们都是用来启动项目的内置命令，且经常在一个 npm 管理项目中使用。默认情况下，项目中会定义一个 “start” 的脚本，所以通常可以使用简化的形式 “npm start” 来运行这个脚本。然而，”npm run” 则更为通用，它可以运行项目中自定义的脚本，如 “test”、”build” 等，只需要在前面加上对应的脚本名称即可，如 “npm run test”、”npm run build” 等。

3.4、打包

看过了 start 指令，现在来看看剩下的 make 和 package 指令：

Electron Forge 是一个全面的开发工具，主要用于构建、打包和分发 Electron 应用程序。在 Electron Forge 中，”make” 和 “package” 两者都是非常常用的指令，但它们的作用和使用场景有所不同。具体来说，”make” 命令的主要功能是编译和运行你的应用程序。该过程实际上会调用一个特定的脚本，即以 “electron-forge-make.js” 结尾的 make 模块。另一方面，”package” 命令则主要用于将你的应用程序打包成一个可执行文件，这通常会包括各种准备工作，例如代码优化、资源清理等。对应的，这个过程中会调用的脚本是 “electron-forge-package.js” 结尾的包模块。（内容由讯飞星火 AI 生成）

我们来运行一下 npm run make ，可以看到实际上执行 make 命令的时候先会去执行 package 命令，最终输出到 out/make 文件夹中：

package 和 make 的输出结果放在了两个目录中：

先看看 package 目录，和官方提供的免安装版客户端（v2.7.0）看上去一样（直观感受就是程序图标变为默认的了，具体区别后面细说），双击 exe 即可运行起来：

再来看看 make 命令的输出目录，可以看到最后的目录内有一个 exe 文件以及另外两个文件：

其实 make 命令输出的是安装包，RELEASES 文件中记录了一些信息，双击 exe 文件会出现一个安装动画：

关于 nupkg 文件，问问 [讯飞星火]：make 生成了 exe 和 nupkg，都有用吗？

当你使用 Electron Forge 的 make 命令，它会把你的应用程序编译成一个可执行文件，这个可执行文件可以直接在本地运行。生成的 exe 文件是针对特定操作系统的可执行安装程序或二进制文件，例如 Windows 上的.exe 文件。另一方面，生成的 nupkg 文件是一个包文件，它包含了你的应用程序的代码和所有依赖项，这个包文件可以在其他计算机上使用 NuGet 包管理器进行部署和安装。

等待了一段时间后，就安好了，并自动打开了程序，但是既没有在桌面也没有在开始菜单中创建快捷方式（可能需要打包的时候进行配置），通过查看系统状态栏上该应用的属性，可以看到是安装到 C:\\Users\<用户名>\AppDataLocal\<应用名>\<版本号> 这个路径下了：

具体内容如下：

其中的 exe 文件自然是可以启动程序的，至于 Update.exe，双击运行，一闪而过，出现一个如下的日志，不知道什么情况下可以升级：

好了，总结一下，就是 package 命令打包出来的相当于免安装版，make 命令打包出来的相当于安装版（不过默认是静默安装，不知道能不能配置）。

四、简单粗暴的方式（偷梁换柱）

其实 Electron 框架提供的就是一个浏览器环境，可在其中运行 Node 项目，前面几节介绍的方式说白了都是为了给项目源码提供这个运行环境。那么有没有一种方式，能够直接提供一个这种环境，不用安装 Electron，不用安装依赖，把源码文件夹直接放进去（毕竟上古时期，前端项目就是改改 Html、JS、CSS，然后保存，浏览器 F5 即可，实在不行就 Ctrl F5）就能运行的呢？答案就是使用官方在几年前提供的最后一版 Windows 客户端（v2.7.0 免安装版）。

首先我们来看看免安装版客户端目录和 electron-v12.0.2 的对比，可以看到排除了一些 Mac 系统的垃圾文件以及日志之后，前者只是多了 resourcesapp 目录（存放项目文件），还有就是用 Leanote.exe 替换了 electron.exe（应该就是换了下图标之类的），其它都是一样的：

所以我们只需要把源代码放在 resources/app 目录下就能运行。我本次修改了一些内容，就是以这样的方式进行的（因为一开始在 VS Code 中给项目安的 electron 版本不对，所以直接运行一直卡在首页转圈界面）。当然，源码目录中有些文件只是开发的时候要用到，包括 Git 版本控制的一些文件等，实际需要的可以参考原版，见下图：

那么怎么调试呢？很简单，首先把程序运行起来，在账号那里点出溢出菜单，选择更多 — 切换开发者工具：

就能打开其内置浏览器（Chromium 内核）的开发者工具，然后可以在需要调试的文件内的代码中设置断点，再进行相应的软件操作就能命中断点了，如下图所示。如果找到问题并修改了代码，只要在这个开发者工具界面按 F5 刷新即可重新载入并生效改后的代码。

不过这种方式只能用于简单的 JS、HTML 的修改，如果要引入新的包，或者修改 CSS（这个项目好像是要解析 less），则还是需要使用上面几节介绍的常规的开发方式。

另外，第三节中打包出的免安装版，和原版中的文件还是有区别的：

其它的先不管它，关键是 resources 文件夹下，只有一个很大的 app.asar 文件了，没有 app 文件夹了，自然也看不到源代码了；而官方原版则只是有一个很小的 default_app.asar 文件，加上 app 文件夹（里面包含源代码）；这其中的区别，之后再研究吧。

五、资源

5.1、桌面客户端源码官方仓库

地址：https://github.com/leanote/desktop-app

最后维护日期为 2021 年，最后一个发行版是 v2.7.0：

5.2、桌面客户端源码修改及国内托管

地址：https://gitee.com/DLGCY_Clone/leanote-desktop-app

本人已将其克隆到 Gitee 了，合并了其它人的一些分支（官方未处理的 10 个 Pull requests 中的几个，主要是 Mrzyxing 请求合并到官方仓库的【支持按文件夹结构导入导出】的功能），添加了 pdf、leanote 文件导出时文件名支持 # 和空格的功能，修复了前述的按文件夹结构导入导出（递归导入导出）功能，具体如下：

提交记录如下：

分支解释：

Mrzyxing：由于他的代码在官方仓库中没有分支，所以我这里给他建了一个。

dlgcy：本人修改的部分放在这里，其它需要合并的也合并过来了。

Build：基于 dlgcy 分支，放开了一些关于 node_modules 的 git ignore，把依赖文件都传上去了，毕竟不知道是不是因为网络的问题，下载这些依赖还是很慢的。

5.3、Windows 客户端完全体

即使有了 5.2 一节最后所说的客户端源码的 Build 分支，也只是简化了依赖文件的下载，实际使用时还是要使用 VS Code 等编译器来执行命令，才能运行起程序。

要实现第四节所说的直接运行，就需要已有的程序文件，所以这里我把官方 v2.7.0 版本除源码外的其余文件（基本也就相当于 Electron v12.0.2 中的文件）也托管到代码仓库了，同时将源码（Build 分支）以 Git 子模块的形式包含进去，这样克隆下来代码并初始化了子模块后，就能直接运行程序了。（关于 Git 子模块，可以参考我之前的文章《通过 GitExtensions 来使用 Git 子模块功能》）

地址：https://gitee.com/DLGCY_Clone/leanote-desktop-windows