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

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

作者 在软件使用 标签 , , , , , , , , , | 517 次访问 百度已收录
目录 显示

蚂蚁笔记 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.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 打开的话，鼠标光标点中某个命令，会弹出一个悬浮窗，能直接点击上面的 “运行脚本” 或 “调试脚本” 来执行相应的命令。（这个不局限于本节这种情况，之前介绍的情况也可以用这种方式快速启动）

%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

打赏
微信扫一扫支付

发表评论