Electron框架运行“Windows 95”项目v3.1.1发布

内容导航：

Electron框架运行“Windows 95”项目v3.1.1发布

如何将electron框架开发的软件包打包成单一exe文件

Electron 主进程和渲染进程

用electron将Vue项目打包为window和Mac桌面应用 （electron-packager与electron-build）

一、Electron框架运行“Windows 95”项目v3.1.1发布

IT之家 10 月 18 日消息，Windows 95 已经满 27 岁了，现在我们也有了更现代的 Windows 11，但 Windows 社区的许多成员可能仍然认为 Windows 95 是微软所创造的最伟大的产品之一。

有开发者在 GitHub 上创建了简称为“Windows95”的项目，在 Electron 框架的帮助下将 Windows 95 带入生活，可用于 Windows、Mac 和 Linux。

现在，该应用程序版本 3.1.1 已发布，带来了一些重大变化。这是因为底层 Electron 框架获得了大更新。IT之家获悉，该应用程序现在支持最新的 Chromium 106。

下面是更新内容：

从 Electron v18 升级到 Electron v21（以及随之而来的 Chrome 和 Node.js)

升级到 v86（声音回来了）。

Electron 21.0.0 还增加了对“Windows 上沉浸式黑暗模式”的支持，这将有助于根据系统的偏好设置黑暗标题栏。其他功能包括支持网络蓝牙配对，支持 V8 JavaScript 引擎，以及更多。

Electron 21.0.0

堆栈升级：

Chromium 106.0.5249.51

Node v16.16.0

V8 v10.6

用户可以在此源码链接中下载并找到更多关于 Windows 95 in Electron 项目的信息。

一、如何将electron框架开发的软件包打包成单一exe文件

前言：研究electron自动更新的时候，在electron的官方文档auto-updater 中，提到了在几个平台mac，linux，windows下electron 的自动更新方法，其中windsow平台上面，文章中建议先用grunt-electron-installer 模块来创建windows安装包，grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具，
一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel创建electron的.exe安装包。

创建nuget包

我们的方法是使用nuget工具创建Nuget包，再使用Squirrel工具创建.exe。

1.下载squirrel.exe和nuget.exe，也可以选择直接安装Squirrel.Windows （需要有vitual
studio环境）。

2.新建文件夹如my-build，把下载好的squirrel.exe，nuget.exe和setup.exe

放进去，在文件夹放入我们未打包的electron应用，如下图：

4.在my-build根目录中，打开命令行执行nuget spec

如下图：

生成 spec包初始文件

5.编辑器打开 Package.nuspec，按照自己项目的需要编辑这个文件，如下图：

这里需要注意：根据Squirrel文档说明，target folder 属性需要设置为lib/net45，否则并没有用；标签用来制定未来的exe的icon。

5.用下面的命令创建一个nuget包，

nuget pack Package.nuspec

如下图：

之后在目录中会出现这个包

命名规则就是..nupkg

创建安装程序

把应用程序打包成nuget包之后，就可以用squirrel创建一个安装程序了。在根目录打开命令行，执行以下命令：

squirrel --releasify ..nupkg

这个时候命令行中没有任何提示。但是别慌，编译一段时间后程序会创建一个release文件夹，里面有三个文件，nuget包，RELEASES 文件和安装文件Setup.exe。如下图：

如果没有出现这三个文件，可以查看目录中的SquirrelSetup.log，根据里面的报错，来进行调试。

注意上面这条squirrel 命令，可以用来设置setup.exe在安装过程中用传统icon还是用自定义的图片文件。使用Squirrel --help可以查看更多帮助

发布应用和安装应用

把上一步生成的setup.exe发送给想要安装这个应用的用户，就可以了。

最终应用会被安装在C:\Users\Administrator\AppData\Local\[appname] 文件夹中，注意Squirrel 的日志文件也存在目录中，调试安装问题的时候非常有用。

双击我们的setup.exe进行安装app的测试，如果中途有任何出错，在

C:\Users\Administrator\AppData\Local\SquirrelTemp 里面可以看到安装日志。如下图：

安装之后打开C:\Users\Administrator\AppData\Local 目录，可以看到app安装在这里，如下图：

自动创建快捷方式

进入我们安装之后的文件夹，命令行进入C:\Users\Administrator\AppData\Local\[your appname]，执行 Update.exe --help ，可以看到

不知道从上图你有没有得到什么提示，反正我发现了，在命令行手动创建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico

所以，如果我们想让应用在安装过程中静默地创建好快捷方式，那就需要在app的安装之后相反设法执行这句代码。

因为我们的.exe会在安装之后自动打开程序，所以我在程序的入口main.js，添加sqruieel事件的监听就好了。如下图：

我顺便把程序卸载时，删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听，但是这两个事件，我还没有进行测试。

更新应用

其实我一直很想做增量更新，在这里我的更新方法有两个，第一是在程序的入口添加js，发送请求到服务器，拉取更改文件进行本地替换，但是如果是node_module依赖包的更改，这个方法并不可行。第二个方法比较安全而且快捷通过发布一个版本号不同的exe，如下：1.在这个创建安装程序的步骤2中，我们把程序代码都复制到了这个文件夹里面，如下图：

如果后续我们的程序要进行更新，首先我们需要把更改的文件直接复制替换到这个文件夹。

2.打开Package.nuspec，编辑version标签

3.参考本文种中创建安装程序部分的步骤2-4，重新生成setup.exe，发布应用。

通过执行setip.exe安装，程序会自动删除之前的应用，但是我并不清楚，sqruieel 是进行了增量替换，还是将之前的整个应用进行删除，再重新安装。

创建自定义安装包

在上一步，我们已经把自己的exe发布出来了，但是如果没有自定义名字跟icon，好像还不够酷，所以我们需要创建自定义的安装文件。

1.下载安装 Resource
Hacker

2.打开这个项目目录，在electron.exe上面右键

出现菜单，点击 Open using Rescource Hacker。

3.Resource Hacker应用运行之后中，在以下界面中选择Icon，然后在工具栏里面选择Action，Replace
Icon，如下图：

然后选择自己想要替换的.ico文件就好

4.这其实并不够，我们还需要更换exe里面的版本信息，打开Version
Info，把FileDescription和ProductName改成我们自己的项目名称，最好把SquirrelAwareVersion也更改一下，毕竟是版本号。

5.做完这些之后，我们需要按照之前的步骤，在命令行中输入

nuget pack Package.nuspec

重新生成nuget包，然后再使用

squirrel --releasify ..nupkg 命令创建安装文件。

6.打开之后生成的releases文件夹，参考本文种中创建安装程序部分的步骤2-4，对setup.exe进行自定义。

最后，一个可以自动更新又安装便捷，还有我们自己的酷酷的图标跟名字的应用就生成拉！

二、Electron 主进程和渲染进程

本节我们来学习什么是主进程和渲染进程，主进程与渲染进程之间有什么区别，主进程和渲染进程之间的通信。下面我们先来看一下进程的概念。

进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。

在 Electron 中，启动项目时运行的 main.js 脚本就是我们说的主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI 。

一个 Electron 应用有且只有一个主进程。并且创建窗口等所有系统事件都要在主进程中进行。

由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。

也就是说每创建一个 web 页面都会创建一个渲染进程。每个 web 页面都运行在它自己的渲染进程中。每个渲染进程是独立的，它只关心它所运行的页面。

主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程中运行。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。

Electron 在主进程和渲染进程中提供了大量 API 去帮助开发桌面应用程序， 在主进程和渲染进程中，可以通过 require() 方法将其包含在模块中，以此获取 Electron 的 API 。

引入 electron ：

所有 Electron 的 API 都被指派给一种进程类型。许多 API 只能被用于主进程或渲染进程中，但其中一些 API 可以同时在上述两种进程中使用。 每一个 API 的文档都将声明我们可以在哪种进程中使用该 API 。

Electron 中的窗口是使用 BrowserWindow 类型创建的一个实例， 它只能在主进程中使用，如下所示：

Electron 的主进程是在后台运行，对应 main.js 文件。而渲染进程是前端看到的，对应 index.html 文件。这个两个进程之间的通信首选 ipc 方式，因为它会在完成时返回，而不会阻止同一进程中的其他操作。

异步通信，在发送消息之后，不会阻止同一进程中程序的继续运行。下列示例渲染进程发送异步消息 ping 到主进程，然后主进程回答 pong 。

渲染器进程：

主进程：

除了以异步方式在进程之间发送消息，我们还可以使用 ipc 模块在进程之间发送同步消息，但是此方法的同步特性意味着它在完成任务时会阻止其他操作。

渲染器进程：

主进程：

链接：

三、用electron将Vue项目打包为window和Mac桌面应用 （electron-packager与electron-build）

1.打包准备

    1.在自己需要打包的vue项目中build项目包出来，这里就不做解释了
    2.新建一个 exe文件夹 （名称自己定义）
    3.克隆项目 地址：git clone
        

 2.配置环境

    1.cd 进入 electron-quick-start 文件夹 npm install 添加依赖 （依赖包60M左右 ）

     2.完成后 将步骤一种build出来的包放入 electron-quick-start 文件夹 如图
        

    3.修改main.js入口文件，
        修改前

      修改后 这里 的路径是build出来文件名称 

        

    4.启动 npm run start

        

                 项目启动完成

3.打包

        1.使用  electron-packager 方式打包，因为依赖还环境问题 现在只能打出window 版本 MAc版本需要使用另一种方式 。
               添加依赖 npm install electron-packager --save-dev 

            

        2.修改package.json 中 

"scripts": {

      "start": "electron .",   

      "packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite"

  }

      然后 npm run packager 打包 
        

   打包完成 

    

    VEA_L-win32-x64 中的exe就是执行文件 

注 此方法只支持打包 window 和linux 版本 mac版本不支持 （没找到解决办法）
    2.使用  electron-build  方式打包 支持window 和Mac （mac版本只有在mac os上才可打包完成 ）

    添加 依赖  建议方法一
       方法一  全局装 yarn  环境  （mac os 自行百度） 

                    npm install -g yarn
                   安装 依赖 yarn add electron-builder --save-dev
        方法二 npm 安装 

                npm install electron-builder
       修改 package.json 中

  "build": {"appId": "com.xxx.app", "copyright":"LEON", "productName":"亦思辰","mac": {"target": ["dmg","zip"]},"win": {"target": ["nsis","zip"] }},

"scripts": { "start": "electron .",    "packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite", "distWin": "electron-builder --win --x64","distMac": "electron-builder --mac --x64","dist": "npm run distWin && npm run distMac"},

    执行命令 打出对应环境包 npm run dist 

    

我因为是window 所以 window打包成功，macos报错，（用macOs 亲测可用 ） 打包完成dist中如下 

注意 完成后 window 会出现 菜单栏 隐藏需要修改 main.js 如下 就可以解决 

总结：以上的俩种方式都可以打包出exe方式不同，都可以配置Ioc图标，这里就不做演示了，有疑问欢迎提意见，共同进步。