Electron 快速入门

1 Electron 是什么
2 创建应用程序
3 打包应用程序

1 Electron 是什么

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

2 创建应用程序

初始化 package.json
```
npm init
```

修改 package.json

{
  "main": "main.js", // 入口文件为 main.js
  "description": "A minimal Electron application", // description 为 "" 会导致后续打包报错
  "scripts": {
    "dev": "electron .", // 启动 electron
  }
}

安装 electron 包

npm install --save-dev electron

若安装失败，设置一下 electron 下载镜像

npm config set electron_mirror "https://npmmirror.com/mirrors/electron/"

在根目录下新增 main.js 文件

const path = require('path')
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    // macOS 应用在没有打开任何窗口的情况下也继续运行
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  // 除 macOS 外，应用关闭所有窗口则完全退出一个应用程序
  if (process.platform !== 'darwin') app.quit()
})

在根目录下新建 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>, Chromium
    <span id="chrome-version"></span>, 和 Electron
    <span id="electron-version"></span>.
  </body>
</html>

在根目录下新建 preload.js

// 通过预加载脚本从渲染器访问 Node.js
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

启动 electron
```
npm dev
```

3 打包应用程序

安装 Electron Forge

npm install --save-dev @electron-forge/cli

使用 Electron Forge 的”import”命令设置 Forge 的脚手架
```
npx electron-forge import
```
使用 Forge 的 make 命令来创建可分发的应用程序
```
npm run make
```
以上三个命令执行完后，会创建一个 out 文件夹，文件夹下包含安装包