概述
protoculture-electron 是一个 npm 包，可以用于快速搭建 Electron 应用程序的基础框架。该框架基于 TypeScript、React 和 MobX，并提供了一些常用 Electron 功能的封装。
本文将详细介绍如何使用 protoculture-electron 来搭建一个简单的桌面应用程序，包括安装、配置、开发和打包等方面。
安装
在开始使用 protoculture-electron 前，需要先在本地安装 Node.js 和 npm（Node.js 自带 npm）。若已经安装了 Node.js 和 npm，请跳过此步。
可以从 Node.js 的官网下载最新的稳定版 Node.js 安装包，然后按照提示进行安装。
安装完毕后，打开终端（Mac/Linux）或命令提示符（Windows），输入以下命令，检查是否成功安装 Node.js 和 npm：
node -v npm -v
以上命令分别输出已安装的 Node.js 和 npm 版本号。
接着，可以使用 npm 命令来安装 protoculture-electron：
npm install -g protoculture-electron
上述命令中的 -g 参数表示全局安装，即安装在系统的全局环境中，可以在任意目录中使用 protoculture-electron 命令。
安装完成后，可以使用以下命令来检查 protoculture-electron 是否已经安装成功：
protoculture-electron -v
创建项目
安装 protoculture-electron 后，可以使用该命令来创建一个新的 Electron 应用程序项目。首先，进入要创建项目的目录，并执行以下命令：
protoculture-electron create my-electron-app
上述命令中的 my-electron-app 可替换为任意名称，用于指定创建的项目名称。执行该命令后，protoculture-electron 将会在当前目录下创建一个名为 my-electron-app 的新项目目录，并在该目录下自动生成一些基础代码和配置文件。
开发应用程序
创建项目后，可使用任意文本编辑器来打开 my-electron-app 目录，并修改生成的代码文件以开发应用程序。以下是一些常用的操作：
运行程序
在终端或命令提示符中，进入 my-electron-app 目录，执行以下命令来运行程序：
npm start
上述命令会在新的窗口中启动 Electron 程序，并自动打开调试工具。在编辑器中修改代码后，可以使用快捷键 Ctrl+S（或 Command+S）来保存文件，然后查看应用程序的效果。
修改窗口标题
在 app.tsx 文件中，可以找到以下代码：
BrowserWindow.addDevToolsExtension(path.join(__dirname, '../../React Developer Tools'))
这行代码用于加载 React 开发工具，可以注释掉或删除它。接着，找到以下代码：
win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile(path.join(__dirname, '../renderer/index.html'))这段代码用于创建主窗口并加载渲染进程的页面。可以在 BrowserWindow 的构造函数中传入参数来修改窗口大小和其他属性，例如：
win = new BrowserWindow({ width: 1024, height: 768, title: 'My Electron App' })
win.loadFile(path.join(__dirname, '../renderer/index.html'))使用 React 组件
在 my-electron-app 目录下，有一个名为 renderer 的子目录，该目录下存放着所有渲染进程的代码文件。renderer 目录中有一个名为 App.tsx 的文件，这是一个最简单的 React 组件示例：
import * as React from 'react'
export default function App() {
return <h1>Hello, World!</h1>
}这个组件会在主窗口中展示一个标题为 "Hello, World!" 的 H1 标签。要使用该组件，可以在 index.html 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -------- -----------
-------
------
---- ---------------
------- --------------------------------
------------------------------------------------- ----------------------------------------
-------
-------这些代码会在主窗口中渲染一个空 div 元素，并调用 ReactDom.render 方法将 App 组件渲染到该元素中。这样就可以在主窗口中看到 "Hello, World!" 了。
使用 MobX 状态管理
在 my-electron-app 目录下，有一个名为 renderer 的子目录，该目录下存放着所有渲染进程的代码文件。renderer 目录中有一个名为 App.tsx 的文件，这是一个最简单的 React 组件示例。
要使用 MobX 状态管理，需要先在 renderer 目录下新建一个名为 stores 的子目录，并在该目录下创建一个 CounterStore.ts 文件，代码如下：
-- -------------------- ---- -------
------ - ------------------ - ---- ------
----- ------------ -
----- - -
------------- -
------------------------
-
----------- -
------------
-
----------- -
------------
-
-
------ ------- --- --------------这个文件定义了一个 CounterStore 类，其中包含了一个 count 属性和两个方法 increment 和 decrement。makeAutoObservable 方法会自动为这个类生成一些 MobX 相关的代码。
接着，在 App.tsx 文件中添加以下代码：
-- -------------------- ---- -------
------ - -- ----- ---- -------
------ - -------- - ---- -----------------
------ ------------ ---- ------------------------
------ ------- ----------------- ----- -
------ -
-----
---------- -------------------------
------- ----------- -- ------------------------------------
------- ----------- -- ------------------------------------
------
-
--这个组件会从 CounterStore 中读取 count 属性，并在页面中展示。同时，它也会通过 onClick 事件来修改 CounterStore 中的状态。
使用 Electron 功能
在 Electron 中，可以使用 Node.js 的许多模块来访问操作系统的底层功能，例如文件系统、网络、进程控制等等。以下是一些常用的 Electron 模块示例：
打开对话框
import { dialog } from 'electron'
function openFile() {
dialog.showOpenDialog({ properties: ['openFile'] }).then((result) => {
console.log(result.filePaths)
})
}调用 dialog.showOpenDialog 方法可以打开一个文件选择对话框，并返回选中的文件路径。
托盘图标
-- -------------------- ---- ------- ------ - ---- ---- - ---- ---------- ------ - -- ---- ---- ------ --- ----- ---- --------------- -- -- - ---- - --- ------------------------- --------------------------- ------------------- -------- ----- --
调用 new Tray 方法可以创建一个托盘图标，然后可以使用 setToolTip 方法设置图标鼠标提示信息。
调试应用程序
在开发过程中，可以使用开发工具来调试应用程序，例如 Chrome DevTools 和 react-devtools。
Chrome DevTools
在运行程序后，可以使用快捷键 Ctrl+Shift+I（或 Command+Option+I）来打开 Chrome DevTools，然后在其中查看控制台输出、网络请求、元素结构等信息。
react-devtools
在开发 React 组件时，可以使用 react-devtools 工具来查看组件结构、状态变化等信息。可以在应用程序的主进程中调用以下代码加载 react-devtools：
if (isDev) {
BrowserWindow.addDevToolsExtension(path.join(__dirname, '../../React Developer Tools'))
}然后在 Chrome DevTools 中点击 "React" 面板即可查看。
打包应用程序
完成应用程序的开发后，可以使用 protoculture-electron 提供的打包命令来生成可执行文件和安装包。以下是一些常用的打包示例：
生成可执行文件
在 my-electron-app 目录中，执行以下命令可以生成可执行文件：
npm run package
上述命令会将应用程序打包为可执行文件，并存储在 dist 目录中。
生成安装包
在 my-electron-app 目录中，执行以下命令可以生成安装包：
npm run dist
上述命令会将应用程序先打包为可执行文件，然后生成安装包，并存储在 dist 目录中。
配置打包选项
在 package.json 文件的 build 字段中，可以配置打包选项。例如，可以配置应用程序的名称、版本号、图标等信息。具体可用的选项请参考 Electron Builder 官方文档。
结语
以上就是如何使用 protoculture-electron 搭建一个简单的 Electron 应用程序的方法和步骤。除了本文中提到的内容外，还有诸如菜单栏、Web 界面、数据库、通知等等相关技术。希望本文对读者有所启发，并为开发 Electron 应用程序提供一些参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673481e8991b448e3b89