SpotSpot 项目使用教程

1. 项目目录结构及介绍

SpotSpot/
├── dist/
├── src/
│   ├── main/
│   │   ├── index.ts
│   │   ├── main.ts
│   │   └── ...
│   ├── renderer/
│   │   ├── index.ts
│   │   ├── App.tsx
│   │   └── ...
│   └── ...
├── package.json
├── tsconfig.json
├── README.md
└── ...

目录结构说明

• dist/: 编译后的文件存放目录。
• src/: 源代码目录。
  • main/: 主进程代码目录。
    • index.ts: 主进程入口文件。
    • main.ts: 主进程主要逻辑文件。
  • renderer/: 渲染进程代码目录。
    • index.ts: 渲染进程入口文件。
    • App.tsx: 渲染进程主要组件文件。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。
• README.md: 项目说明文档。

2. 项目启动文件介绍

主进程启动文件

• src/main/index.ts: 这是主进程的入口文件，负责初始化 Electron 应用并启动渲染进程。

渲染进程启动文件

• src/renderer/index.ts: 这是渲染进程的入口文件，负责加载 React 应用并渲染到 Electron 窗口中。

3. 项目配置文件介绍

package.json

{
  "name": "spotspot",
  "version": "4.0.2",
  "main": "dist/main/index.js",
  "scripts": {
    "start": "yarn run build && electron .",
    "build": "tsc",
    "package": "electron-packager . --out=dist --overwrite"
  },
  "dependencies": {
    "electron": "^9.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "typescript": "^3.9.3"
  }
}

配置文件说明

• name: 项目名称。
• version: 项目版本号。
• main: 主进程入口文件路径。
• scripts: 项目脚本配置。
  • start: 启动项目命令。
  • build: 编译 TypeScript 代码命令。
  • package: 打包项目命令。
• dependencies: 项目依赖包。
• devDependencies: 开发环境依赖包。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

配置文件说明

• compilerOptions: TypeScript 编译选项。
  • target: 编译目标版本。
  • module: 模块系统。
  • outDir: 输出目录。
  • rootDir: 源代码目录。
  • strict: 严格模式。
  • esModuleInterop: 启用 ES 模块互操作。
  • skipLibCheck: 跳过库文件检查。
  • forceConsistentCasingInFileNames: 强制文件名大小写一致。
• include: 包含的文件或目录。
• exclude: 排除的文件或目录。