Electron React TypeScript 起步指南

1. 项目介绍

Electron React TypeScript 起步项目是一个用于快速启动基于 Electron、React 和 TypeScript 的桌面应用程序的开发框架。本项目旨在提供一个稳固的起点，帮助开发者避免在整合这些技术时遇到的一些常见问题。它包含了一些基本的修复和优化，使得在使用 React 和 TypeScript 开发 Electron 应用时更为顺畅。项目支持在代码变更时自动重新加载 Electron 应用，从而加速开发流程。

2. 项目快速启动

安装依赖

首先，确保您的系统中已安装了 Node.js 和 npm。

克隆项目到本地：

git clone https://github.com/nateshmbhat/electron-react-ts-starter.git
cd electron-react-ts-starter

分别安装渲染进程和主进程的依赖：

cd renderer
npm install

cd ../main
npm install

运行项目

启动渲染进程（React 应用）：

cd renderer
npm run start

启动主进程（Electron 应用）：

cd main
npm run start

构建项目

确保在 main/package.json 中的所有依赖项都已添加到 renderer/package.json。然后从渲染进程目录构建项目：

cd renderer
npm run release
# 或者使用 npm run build

构建完成后，您的应用程序将位于 dist 文件夹中。

3. 应用案例和最佳实践

使用 React Router

如果您的应用使用 React Router，建议使用 HashRouter 而不是 BrowserRouter。

修改构建设置

在 renderer/package.json 中，可以使用 build 属性来定制 electron-builder 的设置。所有静态资产和文件应放置在 assets 文件夹中。

生成不同类型的安装程序

要生成如 'msi'、'appx'、'7z'、'zip' 等不同类型的安装程序，您可以在 renderer/package.json 的 build 属性中更改 target。

处理嵌套的 TypeScript 文件结构

如果 main 文件夹中存在嵌套的 TypeScript 文件结构，请在构建 React 应用之前，将所有生成的 .js 文件复制到 renderer/public/ 文件夹中。

4. 典型生态项目

本项目的典型生态项目包括 Windows Terminal Tweaker，它使用这个起步项目作为基础来开发一个定制化的 Windows 终端配置工具。

以上就是使用 Electron React TypeScript 起步项目的简要指南。希望这对您的开发工作有所帮助。