Electron Router 项目教程
1. 项目的目录结构及介绍
Electron Router 项目的目录结构如下:
electron-router/
├── assets/
│ └── icons/
├── dist/
├── node_modules/
├── out/
├── preload/
├── renderer/
├── scripts/
├── src/
│ ├── main/
│ ├── renderer/
│ └── shared/
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
└── webpack.config.js
目录介绍
assets/
: 存放项目所需的静态资源,如图标等。dist/
: 编译后的文件存放目录。node_modules/
: 项目依赖的模块存放目录。out/
: 打包后的输出目录。preload/
: 预加载脚本存放目录。renderer/
: 渲染进程的代码存放目录。scripts/
: 项目脚本存放目录。src/
: 源代码存放目录。main/
: 主进程的代码存放目录。renderer/
: 渲染进程的代码存放目录。shared/
: 共享代码存放目录。
.gitignore
: Git 忽略文件配置。package.json
: 项目依赖和脚本配置文件。README.md
: 项目说明文档。tsconfig.json
: TypeScript 配置文件。webpack.config.js
: Webpack 配置文件。
2. 项目的启动文件介绍
项目的启动文件主要位于 src/main/
目录下,通常包括以下文件:
index.ts
: 主进程的入口文件,负责创建窗口和管理应用的生命周期。
index.ts
文件示例
import { app, BrowserWindow } from 'electron';
import { join } from 'path';
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: join(__dirname, 'preload.js'),
},
});
if (process.env.NODE_ENV === 'development') {
mainWindow.loadURL('http://localhost:3000');
} else {
mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
}
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
3. 项目的配置文件介绍
项目的配置文件主要包括以下几个:
package.json
: 项目依赖和脚本配置文件。tsconfig.json
: TypeScript 配置文件。webpack.config.js
: Webpack 配置文件。
package.json
文件示例
{
"name": "electron-router",
"version": "1.0.0",
"main": "dist/main/index.js",
"scripts": {
"start": "electron .",
"build": "webpack",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"dependencies": {
"electron": "^13.1.7",
"react": "^17.0.2",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"typescript": "^4.3.5",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.2"
}
}
tsconfig.json
文件示例
{
"compilerOptions": {
"target": "ES2019",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,