1分钟让你的JS代码变成一个桌面应用端程序。

基于 Electron 1分钟让你的JS代码变成一个桌面应用端程序。

Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

详情请戳：www.electronjs.org/zh/docs/lat…

1.去我的 git 克隆这份代码。

地址：gitee.com/shao-gen/el…

2.npm i 下载依赖

3.简单介绍一下比较重要的文件

3.1：code 就是我们正常写js代码的文件夹目录，你所有的js代码都在里面写

要说一下 icon.png，这个就是你的桌面应用端左上角的图片，类似网站的favicon.ico。不过他的要求比较奇葩，需要png格式，并且分辨率大一点。我这里用的992X992。

3.2：.gitignore，git忽略跟踪的，不用多说。

3.3：main.js，简单的声明js和Electron之间的关系转化。不用太在意，拿过来直接用即可

3.4：package-lock.json，各种npm包的信息。不用太在意，拿过来直接用即可

3.5：package.json，一些调试命令的设置。不用太在意，拿过来直接用即可

3.6：preload.js，一些兼容浏览器，node，Electron，之间的转化。不用太在意，拿过来直接用即可

以上：出现了很多不用太在意，拿过来直接用即可。并不是敷衍大家，因为这些信息有关于 Electron 的各种配置等.....。

我们只要能达到最终的效果：1分钟让你的JS代码变成一个桌面应用端程序。不用太关心各种配置信息。

打个比方：你的手机能打电话，你会使用手机拨号和接听就可以了，不用太关心手机为什么能接打电话，一个道理。

4.本地调试，本人用的不多

一般我的用法：自己写Vue的项目，或者react的项目，web端调试和开发。然后测试之后，把npm run build 之后生成的 dist 或者 build 里面的代码之间拖到 code 目录下。然后在此项目下运行 npm run build。等待打包成功之后（大概1分钟），就可以了。

命令行执行 npm run serve

或者打开 package.json

本地调试成功之后的效果：

这里的桌面应用端的名字就是你的index.html的title的文字，可以自己随便修改：

4.打包

本人使用经验：先正常的开发web端，使用Vue也好React也好，JQ也好。随便。

经过测试之后，把web项目经过打包（压缩）的代码，拖入 code 目录。

然后 命令行 运行 npm run build

或者打开 package.json ，点击调试 选择 build（和上面本地调试一样）

然后等待不到1分钟，会生成一个 builder 文件。

好了，我们需要的一个桌面端的程序就已经生成成功了。

进入 win-unpacked 双击打开 code.exe，完美运行。

妈妈再也不用担心我不会写桌面应用端程序啦~