前言
本文只是为了普及、尝鲜框架
electron
，并非是一份学习文档，目的是为了快速启动并使用。因此，很多细节、逻辑、原理都没有涉及，但是文章中有各种链接，可以帮助大家学习，可以自行点击学习。
注意：本文所有内容来均源于官网、Github。
链接
简介
Electron是什么
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入
Chromium
和
Node.js
到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
学习前提
熟悉该文档之前，需要你有Node.js和web开发经验。 如果您需要了解这两个方面的开发知识，我们推荐您使用以下学习资源：
此外，如果您熟悉Chromium进程模型，您将更好了解 Electron 的工作原理。 You can get a brief overview of Chrome architecture with the
Chrome comic
, which was released alongside Chrome’s launch back in 2008. 尽管Chrome发布十多年了，【Chrome comic】漫画中介绍的核心原理仍然有助于理解Electron。
快速上手
除去通过官网的方式，这边建议直接采用推荐的脚手架速度搭建一个electron应用。
electron-quick-start
这次也从这里进行演示
1. Clone
注意：先确保本地环境有Node和npm
git clone https://github.com/electron/electron-quick-start.git
2. 认识整体、启动
这个时候你的文件夹下面应该是这样的结构：
.
├── LICENSE.md
├── README.md
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── preload.js
└── renderer.js
index.html:
启动的时候展示的首页，通过
main.js
引入。
Main.js:
启动的时候吊起的
Node
服务。
Preload.js:
预加载脚本。
预加载
脚本连接到渲染器时派上用场。 预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如
window
和
document
) 和 Node.js 环境。
启动：
查看
package.json
并启动
electron
。
npm start
这个时候你就能看的到启动的框了。
3. 回顾
整体上来看，
electron
通过本地调启
Node
服务，去加载
main.js
，然后在这个文件中去加载
index.html
，最终渲染展示。
打包
最快捷的打包方式是使用
Electron Forge
。
-
将 Electron Forge 添加到应用的开发依赖中，并使用其
import
命令设置
Forge
的脚手架
npm install --save-dev @electron-forge/cli
npx electron-forge import
✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore
We have ATTEMPTED to convert your app to be in a format that electron-forge understands.
Thanks for using "electron-forge"!!!
-
使用 Forge 的
make
命令来创建可分发的应用程序：
npm run make
> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make
✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64
Copy
Electron Forge creates the
out
folder where your package will be located:
// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app