Electron React Webpack Typescript 2024 项目教程

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

electron-react-webpack-typescript-2024/
├── assets/
├── src/
│   ├── main/
│   ├── renderer/
│   └── common/
├── tools/
│   └── forge/
├── .gitattributes
├── .gitignore
├── .prettierrc
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── eslint-config.json
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json

目录结构介绍

• assets/: 存放项目中的静态资源文件，如图片、字体等。
• src/: 项目的源代码目录。
  • main/: 存放 Electron 主进程的代码。
  • renderer/: 存放 React 渲染进程的代码。
  • common/: 存放主进程和渲染进程共享的代码。
• tools/: 存放项目的工具配置文件，如 Electron Forge 的配置文件。
• .gitattributes: Git 属性配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置文件。
• CHANGELOG.md: 项目更新日志。
• CODE_OF_CONDUCT.md: 项目行为准则。
• CONTRIBUTING.md: 项目贡献指南。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• eslint-config.json: ESLint 配置文件。
• package.json: 项目依赖和脚本配置文件。
• pnpm-lock.yaml: pnpm 依赖锁定文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

主进程启动文件

主进程的启动文件位于 src/main/index.ts。该文件是 Electron 应用的入口点，负责启动主进程并创建渲染进程窗口。

渲染进程启动文件

渲染进程的启动文件位于 src/renderer/index.tsx。该文件是 React 应用的入口点，负责渲染 React 组件到 Electron 窗口中。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本命令和其他元数据。以下是一些关键配置项：

• scripts: 定义了项目的启动、打包、发布等命令。

  • start: 启动开发环境。
  • package: 打包应用。
  • make: 生成平台特定的分发包。
  • publish: 发布应用。
  • lint: 使用 ESLint 检查代码。

• keywords: 项目的关键词，用于描述项目。

• author: 项目作者信息。

• contributors: 项目贡献者信息。

• repository: 项目的 Git 仓库地址。

• license: 项目许可证。

• config: 项目的配置文件路径，如 Electron Forge 的配置文件。

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了 TypeScript 编译器的选项。以下是一些关键配置项：

• compilerOptions: 编译器选项，如目标版本、模块系统、路径别名等。
• include: 需要编译的文件或目录。
• exclude: 需要排除的文件或目录。

eslint-config.json

eslint-config.json 文件是 ESLint 的配置文件，定义了代码检查规则。以下是一些关键配置项：

• extends: 继承的 ESLint 配置。
• rules: 自定义的代码检查规则。

tools/forge/forge-config.js

tools/forge/forge-config.js 文件是 Electron Forge 的配置文件，定义了应用的打包和分发配置。以下是一些关键配置项：

• makers: 定义了生成平台特定分发包的工具。
• publishers: 定义了发布应用的服务。

通过以上配置文件，开发者可以自定义项目的构建、打包、发布等流程，以满足不同的需求。