Electron+SvelteKit 开发选型与脚手架工具选择【2024年4月】

人生处处是选择，每个选择都或许会导向一个全新的时空

上一篇 在虚拟机中安装Ubuntu+Electron开发环境 讲到我打算开发一个 windows 桌面应用，最终选择了 Electron。

一. 技术选型

选型是一个比较难的事情：现有代码的掣肘、未来技术方向的预判、组员人心所向、实际需求的贴合度等等，都是需要考虑的。
但我选择 Electron 主要是拍脑袋决定的：对于一款不需要交付的桌面应用，开发的同时还可以多了解一些前端技术，一举两得。
至于 Svelte，我是第一眼就爱上了。预编译的构建方式、精巧的结构、优雅的语法，让它看起来就像一颗宝石。官方网站的在线教程 learn.svelte.dev 也上大分。选择 Svelte，我几乎没有犹豫。
然后就有了上一篇的开发环境搭建过程。

二. 脚手架的选择

2.1 electron-vite

了解了一下electron相关的脚手架工具，决定采用 electron-vite，并选择 svelte 模板：

npm create @quick-start/electron my-app -- --template svelte

安装后发现支持的是 Svelte，不是 SvelteKit，而后者更适用于项目开发。

2.2 electron-vite-sveltekit-template 【共9条命令】

继续找啊找，然后找到了这个：https://github.com/dj-nuo/electron-vite-sveltekit-template
这个项目是直接借用了 electron-vite 的主体，然后将 SvelteKit 的项目替换掉原有的 renderer，相当于是把 SvelteKit 嫁接到 electron-vite，很有点意思。【electron-vite 的 issues 里有两个作者的讨论：https://github.com/alex8088/electron-vite/issues/145，值得一看】
根据项目 README，安装如下：

cd ~
git clone https://github.com/dj-nuo/electron-vite-sveltekit-template.git
cd electron-vite-sveltekit-template/
npm install
cd src/renderer && npm install
cd -

可以看到，操作步骤分别在根目录与src/renderer目录下进行了 npm install 的安装操作，对应着 electron-vite 与 sveltekit 两个项目。
以上步骤我是在 ssh 到虚拟机的 term 工具里进行的，下面的建议直接在虚拟机里敲：

cd ~/electron-vite-sveltekit-template/
startx
npm run dev

可以看到程序运行，并打开了 dev tool。
注1：不知道为什么窗口没有显示标题栏，也不能移动【还未及研究】
注2：有不少 error log，暂时不管
注3：项目里默认关闭了menu，我觉得最好打开，方便操作：
src/main/index.ts:28

    autoHideMenuBar: false,

2.3 sveltekit-electron 【共8条命令】

另外还找到这个项目：https://github.com/FractalHQ/sveltekit-electron
这个项目是直接结合了 Electron 和 SvelteKit，更加贴近我的初始需求，故也进行了一番尝试。按照 README 操作如下：

cd ~
git clone https://github.com/FractalHQ/sveltekit-electron.git
cd sveltekit-electron/
npm install

注：在执行 npm install 之前，最好将下面的配置加入 .npmrc【中国人都懂】：

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

然后在虚拟机里，直接敲：

cd ~/sveltekit-electron/
startx
npm run dev

可以看到程序运行，下面的按钮可以点击。
注1：不知道为什么窗口没有显示标题栏，也不能移动【还未及研究】
注2：有 error log，暂时不管
注3：项目里默认关闭了menu，我觉得最好打开，方便操作：
src/electron.cjs:27

        autoHideMenuBar: false,

2.4 框架工具的选择

从上面的尝试中，可以看到 2.2 electron-vite-sveltekit-template 与 2.3 sveltekit-electron 都可以满足我的需求。最终选择了 2.2 electron-vite-sveltekit-template，原因如下：

1. 2.2 的 .npmrc 里面加入了至关重要的 mirror 配置，这是主因
2. 2.2 的创建时间不久，而 2.3 已经有段时间没有更新了
3. 2.3 还在使用 cjs，尝试过程中发现 cjs, js, ts 之间互相引用时有不少麻烦

三. 关于构建与打包

在文末的虚拟机下载链接中，其环境止于上述步骤。因为：

1. 后续构建与打包要消耗不少的硬盘空间，会增大虚拟机的大小
2. 打包需要额外下载新的库，暂时没有必要

不过我还是将相关步骤列在此处，以供参考。

3.1 构建 electron-vite-sveltekit-template

如下：

cd ~/electron-vite-sveltekit-template/
npm run build:win

然后会出现如下提示：

走到这一步说明构建已经成功了！ 在 dist/win-unpacked 目录下可以找到生成目标。将 win-unpacked 目录整个拷贝到 windows 内运行，成功！

上图中的错误提示系统缺少 wine 打包器，因此没法将 dist/win-unpacked 打包成 setup.exe。若有需要，可按照高亮链接进行后续 wine 的安装。我尝试操作过，有一些坑。算是算助人为乐吧，我把操作步骤也放下面了：

---

# 激活32位配置，需要额外下载很多库
sudo dpkg --add-architecture i386
sudo mkdir -pm755 /etc/apt/keyrings
sudo wget -O /etc/apt/keyrings/winehq-archive.key https://dl.winehq.org/wine-builds/winehq.key
sudo wget -NP /etc/apt/sources.list.d/ https://dl.winehq.org/wine-builds/ubuntu/dists/jammy/winehq-jammy.sources
sudo apt update
sudo apt install --install-recommends winehq-stable

# 后续步骤需要root权限执行npm
sudo ln -s /home/dev/.nvm/versions/node/v20.12.2/bin/npm /usr/bin/npm
sudo ln -s /home/dev/.nvm/versions/node/v20.12.2/bin/node /usr/bin/node
sudo npm run build:win

注：若非 sudo npm，则会导致权限不足：

---

3.2 构建 sveltekit-electron

默认会同时构建 win/linux/macos 三个版本，并会因 dmg.license 库的问题导致构建失败。这里偷个懒，只构建 windows 版本，绕过这个错误。
package.json:16 将 -mwl 改成 --win：

        "build:electron": "electron-builder --win --config build.config.json"

并确认 .npmrc 中配置了镜像：

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

然后执行：

cd ~/sveltekit-electron/
npm run build

之后的过程同 3.1：

• 若未安装 wine，则会在构建后退出，但 dist/win-unpacked 已经是可以执行的 portable 版本；
• 若安装了 wine，则需要用 sudo npm run build 来进行打包，否则会遇到权限问题

四. 虚拟机

同上一篇文章，我将虚拟机放到网盘以供下载，方便拿来主义。

本虚拟机含有本文第二章节的内容，即两个脚手架项目均可直接运行 npm run dev；但不含本文第三章节的构建和打包部分。

https://pan.baidu.com/s/16phojgQYn2Fu7b3LwQ08EA?pwd=1q7v

用 vmware 运行时，选择"复制虚拟机"；
登录 ubuntu 时，用户名：dev | 密码：123456

下一篇见