Electron 快速入门——5.1：Dev 编译与启动主进程

Electron快速入门——5.1：Dev 编译与启动主进程

绪论

Electron 的开发流程分为了两大块：开发环境搭建和实际开发。

本系列文章第二部分，我们已经介绍了如何为 Electron 应用搭建开发环境。第三部分和第四部分，我们重点讲解了渲染进程的模块化开发。这部分内容对我们后面对Electron 应用的实际开发是至关重要的。

渲染进程是 Electron 应用最重要的组成部分之一，负责渲染最终用户看到的界面。渲染进程与主进程之间通过IPC通信。

主进程是 Electron 应用的另一个重要组成部分，负责协调应用的生命周期和管理Electron 的底层功能，如创建窗口、管理菜单和处理系统事件。主进程与渲染进程是分开的，各自运行在不同的进程中。主进程与渲染进程的这种分离设计，保证了应用的稳定性和安全性。

我们前面创建的 Electron 应用，采用的是单文件开发模式，意味着整个应用所有的代码都集中在一个main.js文件中。这样做显然不利于大项目的开发。

Electron同样支持模块化开发。在项目下创建package.json文件，在其中指定main字段指向应用入口文件。例如，我们创建的第一个Electron应用的package.json 文件如下：

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "My Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron --inspect=5858 ."
  }
}

从Electron版本5.0开始，如果你在Electron应用的 package.json 中将main字段的值设为相对于package.json文件所在的目录的路径，Electron 会默认将此路径解释为一个CommonJs 模块。在之前的版本中，你必须显示地告诉Electron该文件是个CommonJs 模块。

在项目下，存在 tsconfig.json 文件，用于编译我们 web 中的 ts，我们对其做一些改变。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "CommonJs"
  },
  "include": [
    "src"
  ]
}

接下来，我们需要在项目中创建主进程入口文件 main.ts，我们新建一个 src 文件夹，在里面创建 main.ts，内容如下：

console.log('主进程已启动')

这样，我们就可以用 CommonJs 的规范来写主进程代码了。

Electron 为我们提供了一个Electron 模块，用于创建窗口、设置菜单等操作。例如，我们可以通过以下代码来创建一个窗口：

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

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadFile('index.html')

  mainWindow.webContents.openDevTools()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

这个窗口在Electron的API中叫做BrowserWindow。

现在，我们可以在package.json中通过start脚本启动应用。

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "My Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron --inspect=5858 ."
  }
}

运行start命令，应用程序将启动，在 package.json 中指定的 main 字段中加载我们的入口文件。这个命令可以在非开发环境中运行我们的应用。

同样地，我们也可以在package.json中通过dev脚本来启动一个调试窗口，这样我们就可以在开发过程中实时地查看应用程序的状态。运行dev命令，应用程序将启动，并创建一个调试窗口，该窗口中会显示应用程序的控制台输出和调试信息。我们可以使用Electron的API在控制台中打印日志，或者使用一些调试工具来查看变量的值。

这就是Electron快速入门系列的第五部分。现在，我们已经学会了如何在Electron中进行Dev编译和启动主进程，从而实现模块化开发。在下一篇，我们将继续探讨Electron应用的模块化开发，重点讲解主进程的模块化开发。