Electron React TypeScript 项目教程

1. 项目的目录结构及介绍

electron-react-typescript/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── main/
│   │   ├── index.ts
│   │   └── ...
│   ├── renderer/
│   │   ├── App.tsx
│   │   ├── index.tsx
│   │   └── ...
│   └── ...
├── .gitignore
├── package.json
├── tsconfig.json
└── ...

目录结构说明

• public/: 包含静态文件，如 index.html。
• src/: 源代码目录。
  • main/: 主进程代码。
    • index.ts: 主进程入口文件。
  • renderer/: 渲染进程代码。
    • App.tsx: React 应用的主组件。
    • index.tsx: 渲染进程入口文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

主进程启动文件

• src/main/index.ts: 这是 Electron 应用的主进程入口文件。它负责启动 Electron 应用并管理窗口的创建和生命周期。

渲染进程启动文件

• src/renderer/index.tsx: 这是 React 应用的入口文件。它负责渲染 React 组件到 DOM 中。

3. 项目的配置文件介绍

package.json

{
  "name": "electron-react-typescript",
  "version": "1.0.0",
  "main": "src/main/index.ts",
  "scripts": {
    "start": "electron-forge start",
    "build": "electron-forge make",
    "package": "electron-forge package"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0",
    "typescript": "^4.3.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "jsx": "react-jsx",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

配置文件说明

• package.json: 包含项目的基本信息、依赖、脚本等。
  • main: 指定主进程入口文件。
  • scripts: 定义启动、构建、打包等命令。
  • dependencies: 生产环境依赖。
  • devDependencies: 开发环境依赖。
• tsconfig.json: TypeScript 编译配置。
  • compilerOptions: 编译选项。
  • include: 指定包含的文件或目录。