@a1motion/electron-kit 中文文档教程

Question

electron-kit

自以为是的电子构建工具。

深受 desktop/desktop 和 react-scripts

File Structure

这个项目对你的应用程序使用的文件结构有一些期望。

JavaScript 和带有 React 的 TypeScript 在任何地方都受支持，但我们将在示例中使用 TypeScript。

必需的文件结构：

preload.ts 是必需的，但如果不需要，可以为空。

静态文件夹中的所有文件都将被复制过来，index.html 将用作您的 React 应用程序的入口点。

.electron-kit/
  config.js
src/
  main/
    index.ts
  renderer/
    index.tsx
    preload.ts
  static/
    index.html

Configuration

TODO

Compile Time Variables

Name	Value
VERSION	The version of your app, as specified in your package.json.
PROCESS_KIND	Used internally, but is set to main or renderer, depending on the process.

Runtime API

Warning: Electron will be deprecating shared globals between processes, you should instead looking to converting your API to use IPC methods instead.

Electron 允许您甚至在渲染器内部导入依赖项，并像在主进程中一样使用它。 但是，此工具不会在最终构建中保留 node_modules/，因此此方法将更有效。

相反，在您的主进程中，您应该注册您的模块以在渲染器进程中工作。

// main
import kit from "electron-kit";
import Store from "electron-store";

const store = new Store();

kit.registerModule("store", store);

// renderer
import kit from "electron-kit";
const store = kit.importModule("store");

Use IPC methods (recommended)

// main
import { ipcMain } from "electron";
import Store from "electron-store";

ipcMain.handle(`store-get`, (e, key, defaultValue) => {
  return store.get(key, defaultValue);
});

ipcMain.handle(`store-set`, (e, key, val) => {
  return store.set(key, val);
});

ipcMain.handle(`store-delete`, (e, key) => {
  return store.delete(key);
});

// renderer
import { ipcRenderer } from "electron";

const store = {
  get(key: string, defaultValue?: string) {
    return ipcRenderer.invoke(`store-get`, key, defaultValue);
  },
  set<T>(key: string, val: T) {
    return ipcRenderer.invoke(`store-set`, key, val);
  },
  delete(key: string) {
    return ipcRenderer.invoke(`store-delete`, key);
  },
};

Typescript

electron-kit 提供了许多运行时和编译时实用程序。 Typescript 应该自己获取运行时 API。 但是，要获得对编译时变量的类型访问权限，请将 index.d.ts 文件添加到应用程序的根目录并添加以下内容：

/// <reference types="@a1motion/electron-kit/managed" />