Electron React Webpack Typescript 2024 项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00068/article/details/142277453

Electron React Webpack Typescript 2024 项目教程

electron-react-webpack-typescript-2024 Electron React Webpack Typescript Boilerplate with Custom Window and Titlebar Menus. 项目地址: https://gitcode.com/gh_mirrors/el/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 的配置文件。