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

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

蚂蚁笔记 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 盘,然后把路径添加到环境变量中:

%title插图%num

 

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 .

 

成功启动:

%title插图%num

 

二、[供参考] 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 指令,可将其添加到系统环境变量中)。

%title插图%num

 

三、electron-forge 方式(打包

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

 

3.1、安装依赖包

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

%title插图%num

--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

%title插图%num

npx electron-forge import 是一个用于将项目导入到 Electron Forge 的脚本。它会自动检测项目中的入口文件(如 main.jsindex.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 打开的话,鼠标光标点中某个命令,会弹出一个悬浮窗,能直接点击上面的 “运行脚本” 或 “调试脚本” 来执行相应的命令。(这个不局限于本节这种情况,之前介绍的情况也可以用这种方式快速启动)

%title插图%num

 

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

%title插图%num

 

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

%title插图%num

 

当然,也可以直接手敲指令(npm start)来启动,可以看到是调试模式:

%title插图%num

 

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

%title插图%num

 

来看看讯飞星火怎么说:

“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 文件夹中:

%title插图%num

 

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

%title插图%num

 

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

%title插图%num

 

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

%title插图%num

 

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

%title插图%num

 

关于 nupkg 文件,问问 [讯飞星火]:make 生成了 exe 和 nupkg,都有用吗?

当你使用 Electron Forge 的 make 命令,它会把你的应用程序编译成一个可执行文件,这个可执行文件可以直接在本地运行。生成的 exe 文件是针对特定操作系统的可执行安装程序或二进制文件,例如 Windows 上的.exe 文件。

另一方面,生成的 nupkg 文件是一个包文件,它包含了你的应用程序的代码和所有依赖项,这个包文件可以在其他计算机上使用 NuGet 包管理器进行部署和安装。

 

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

%title插图%num

 

具体内容如下:

%title插图%num

 

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

%title插图%num

 

好了,总结一下,就是 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(应该就是换了下图标之类的),其它都是一样的:

%title插图%num

 

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

%title插图%num

 

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

%title插图%num

 

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

%title插图%num

 

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

 

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

%title插图%num

 

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

 

五、资源

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

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

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

%title插图%num

 

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

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

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

%title插图%num

 

提交记录如下:

%title插图%num

 

分支解释:

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

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

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

%title插图%num

 

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

%title插图%num

 

还添加了一个拷贝文件的脚步,运行之后会将程序运行所需文件都拷贝到上级目录的 BuildOutputleanote-desktop-windows 路径下,这样只要再压缩一下就相当于一个免安装版程序包了,拷到别的地方解压即可使用。

这个脚本还是花了点时间的,连 [讯飞星火] 都不能完全搞定,百度了好久才调整好,脚本如下(可以到仓库中获取):

%title插图%num

 

5.4、关于服务端

之前的文章:《【编辑】蚂蚁笔记服务端搭建(Windows 版)

官方仓库:https://github.com/leanote/leanote

克隆仓库:https://gitee.com/DLGCY_Clone/leanote

%title插图%num

 

六、总结

本文完善了官方提供的开发步骤,介绍了使用 Electron 来运行程序、使用 Electron Forge 来打包程序的方法,展示了直接使用官方原版程序文件来旧瓶装新酒的方法,最后提供了提到的资源,有助于大家进行 “蚂蚁笔记 Windows 客户端” 以及其它 Electron 程序的修改和使用。

本文的完成,[讯飞星火 AI] 起到了很大的作用,特此鸣谢。

下一篇文章打算介绍本次对 “蚂蚁笔记 Windows 客户端” 的修改始末,敬请期待。

 

 

原创文章,转载请注明: 转载自 独立观察员(dlgcy.com)

本文链接地址: [蚂蚁笔记 Windows 客户端编译运行和打包](https://dlgcy.com/leanote-windows-client-build-run-package/)

关注微信公众号 独立观察员博客(DLGCY_BLOG) 第一时间获取最新文章

%title插图%num

发表评论