项目结构 #

my-electron-app/
├── index.html          # 应用入口页面
├── main.js             # 主进程入口
├── preload.js          # 预加载脚本
├── package.json        # 项目配置文件
└── node_modules/       # 依赖目录

my-electron-app/
├── electron/           # Electron 相关代码
│   ├── main.js         # 主进程入口
│   ├── preload.js      # 预加载脚本
│   └── utils/          # 主进程工具函数
│       └── ipc.js      # IPC 通信封装
├── src/                # 渲染进程源码
│   ├── index.html      # 入口页面
│   ├── renderer.js     # 渲染进程脚本
│   ├── styles/         # 样式文件
│   │   └── main.css
│   └── assets/         # 静态资源
│       ├── images/
│       └── fonts/
├── resources/          # 应用资源
│   └── icons/          # 应用图标
│       ├── icon.ico    # Windows 图标
│       ├── icon.icns   # macOS 图标
│       └── icon.png    # Linux 图标
├── build/              # 构建配置
│   └── entitlements.mac.plist
├── dist/               # 打包输出目录
├── tests/              # 测试文件
│   ├── main/           # 主进程测试
│   └── renderer/       # 渲染进程测试
├── .npmrc              # npm 配置
├── .eslintrc.js        # ESLint 配置
├── .prettierrc         # Prettier 配置
├── .gitignore          # Git 忽略配置
├── package.json        # 项目配置
└── README.md           # 项目说明

my-electron-app/
├── electron/
│   ├── main/
│   │   ├── index.js           # 主进程入口
│   │   ├── window.js          # 窗口管理
│   │   ├── menu.js            # 菜单配置
│   │   ├── tray.js            # 系统托盘
│   │   ├── shortcuts.js       # 快捷键
│   │   └── updater.js         # 自动更新
│   ├── preload/
│   │   └── index.js           # 预加载脚本
│   ├── ipc/
│   │   ├── index.js           # IPC 统一导出
│   │   ├── handlers/          # IPC 处理器
│   │   │   ├── file.js
│   │   │   ├── system.js
│   │   │   └── app.js
│   │   └── channels.js        # 频道常量
│   └── utils/
│       ├── store.js           # 本地存储
│       ├── logger.js          # 日志工具
│       └── paths.js           # 路径工具
├── src/
│   ├── index.html
│   ├── renderer.js
│   ├── components/            # UI 组件
│   │   ├── common/
│   │   │   ├── Button.js
│   │   │   └── Modal.js
│   │   └── layout/
│   │       ├── Header.js
│   │       └── Sidebar.js
│   ├── pages/                 # 页面
│   │   ├── Home.js
│   │   ├── Settings.js
│   │   └── About.js
│   ├── styles/
│   │   ├── main.css
│   │   ├── variables.css
│   │   └── components/
│   ├── utils/
│   │   ├── api.js             # API 封装
│   │   └── helpers.js         # 辅助函数
│   └── assets/
│       ├── images/
│       ├── icons/
│       └── fonts/
├── resources/
│   ├── icons/
│   └── installer/
├── scripts/
│   ├── build.js               # 构建脚本
│   ├── dev.js                 # 开发脚本
│   └── release.js             # 发布脚本
├── tests/
│   ├── unit/
│   ├── e2e/
│   └── setup.js
├── docs/                      # 文档
├── .github/                   # GitHub 配置
│   └── workflows/
├── package.json
├── electron-builder.yml
└── README.md

enterprise-electron-app/
├── apps/
│   ├── main/                  # 主进程应用
│   │   ├── src/
│   │   │   ├── index.ts
│   │   │   ├── windows/
│   │   │   ├── services/
│   │   │   ├── ipc/
│   │   │   └── utils/
│   │   ├── tests/
│   │   └── package.json
│   ├── renderer/              # 渲染进程应用
│   │   ├── src/
│   │   │   ├── index.html
│   │   │   ├── main.tsx
│   │   │   ├── components/
│   │   │   ├── pages/
│   │   │   ├── hooks/
│   │   │   ├── store/
│   │   │   ├── api/
│   │   │   └── utils/
│   │   ├── tests/
│   │   └── package.json
│   └── preload/               # 预加载脚本
│       ├── src/
│       │   └── index.ts
│       └── package.json
├── packages/                  # 共享包
│   ├── shared/                # 共享代码
│   │   ├── src/
│   │   │   ├── types/
│   │   │   ├── constants/
│   │   │   └── utils/
│   │   └── package.json
│   └── ui/                    # UI 组件库
│       ├── src/
│       └── package.json
├── resources/
├── scripts/
├── docs/
├── package.json               # 根 package.json
├── pnpm-workspace.yaml        # pnpm 工作区配置
└── turbo.json                 # Turborepo 配置

electron/
├── main/              # 主进程代码
│   ├── index.js       # 入口文件
│   ├── window.js      # 窗口管理
│   ├── menu.js        # 菜单配置
│   ├── tray.js        # 系统托盘
│   ├── shortcuts.js   # 全局快捷键
│   └── updater.js     # 自动更新
├── preload/           # 预加载脚本
│   └── index.js
├── ipc/               # IPC 通信
│   ├── index.js       # 统一导出
│   ├── handlers/      # 处理器
│   └── channels.js    # 频道常量
└── utils/             # 工具函数
    ├── store.js
    ├── logger.js
    └── paths.js

src/
├── index.html         # 入口 HTML
├── renderer.js        # 入口 JS
├── components/        # 组件目录
│   ├── common/        # 通用组件
│   ├── layout/        # 布局组件
│   └── features/      # 功能组件
├── pages/             # 页面目录
├── styles/            # 样式目录
│   ├── main.css
│   ├── variables.css
│   └── components/
├── utils/             # 工具函数
├── hooks/             # 自定义 Hooks（React）
├── store/             # 状态管理
└── assets/            # 静态资源
    ├── images/
    ├── icons/
    └── fonts/

resources/
├── icons/             # 应用图标
│   ├── icon.ico       # Windows 图标 (256x256)
│   ├── icon.icns      # macOS 图标 (512x512)
│   ├── icon.png       # Linux 图标 (512x512)
│   └── tray/          # 托盘图标
│       ├── tray.ico
│       ├── trayTemplate@2x.png
│       └── tray-dark.png
├── installer/         # 安装程序资源
│   ├── background.png # Windows 安装背景
│   └── license.txt
└── sounds/            # 声音资源
    └── notification.mp3

{
    "name": "my-electron-app",
    "version": "1.0.0",
    "description": "我的 Electron 应用",
    "main": "electron/main/index.js",
    "author": "Your Name",
    "license": "MIT",
    "scripts": {
        "start": "electron .",
        "dev": "electron . --enable-logging",
        "build": "electron-builder",
        "build:win": "electron-builder --win",
        "build:mac": "electron-builder --mac",
        "build:linux": "electron-builder --linux",
        "lint": "eslint .",
        "test": "jest"
    },
    "dependencies": {
        "electron-store": "^8.1.0"
    },
    "devDependencies": {
        "electron": "^28.0.0",
        "electron-builder": "^24.9.1",
        "eslint": "^8.56.0"
    },
    "build": {
        "appId": "com.example.myapp",
        "productName": "My App",
        "directories": {
            "output": "dist"
        },
        "files": [
            "electron/**/*",
            "src/**/*",
            "package.json"
        ],
        "mac": {
            "icon": "resources/icons/icon.icns"
        },
        "win": {
            "icon": "resources/icons/icon.ico"
        },
        "linux": {
            "icon": "resources/icons/icon.png"
        }
    }
}

appId: com.example.myapp
productName: My App
copyright: Copyright © 2024

directories:
    output: dist
    buildResources: resources

files:
    - electron/**/*
    - src/**/*
    - package.json
    - "!**/*.map"
    - "!**/node_modules/*/{CHANGELOG.md,README.md,readme.md}"

extraResources:
    - resources/icons/**/*

mac:
    icon: resources/icons/icon.icns
    category: public.app-category.productivity
    hardenedRuntime: true
    gatekeeperAssess: false
    entitlements: build/entitlements.mac.plist
    entitlementsInherit: build/entitlements.mac.plist

win:
    icon: resources/icons/icon.ico
    target:
        - target: nsis
          arch:
              - x64
              - ia32

linux:
    icon: resources/icons/icon.png
    category: Utility
    target:
        - AppImage
        - deb

nsis:
    oneClick: false
    allowToChangeInstallationDirectory: true
    createDesktopShortcut: true
    createStartMenuShortcut: true

publish:
    provider: github
    owner: your-username
    repo: your-repo

registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

# Dependencies
node_modules/

# Build output
dist/
out/
build/

# Logs
logs/
*.log
npm-debug.log*

# OS files
.DS_Store
Thumbs.db

# IDE
.idea/
.vscode/
*.swp
*.swo

# Environment
.env
.env.local
.env.*.local

# Test
coverage/

# Temporary
tmp/
temp/

// 常量：大写 + 下划线
const API_BASE_URL = 'https://api.example.com';
const MAX_RETRY_COUNT = 3;

// 变量：小驼峰
let mainWindow = null;
let clickCount = 0;

// 函数：小驼峰
function createWindow() {}
function handleClick() {}

// 类：大驼峰
class WindowManager {}
class IpcHandler {}

// 私有变量：下划线前缀
let _privateVar = null;
function _privateMethod() {}

// electron/main/index.js
const { app } = require('electron');
const { createMainWindow } = require('./window');
const { setupMenu } = require('./menu');
const { setupTray } = require('./tray');
const { setupIpc } = require('../ipc');
const { setupShortcuts } = require('./shortcuts');

app.whenReady().then(() => {
    createMainWindow();
    setupMenu();
    setupTray();
    setupIpc();
    setupShortcuts();
});

// electron/main/window.js
const { BrowserWindow } = require('electron');
const path = require('path');

let mainWindow = null;

function createMainWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, '../preload/index.js'),
            nodeIntegration: false,
            contextIsolation: true
        }
    });

    mainWindow.loadFile(path.join(__dirname, '../../src/index.html'));
    return mainWindow;
}

function getMainWindow() {
    return mainWindow;
}

module.exports = {
    createMainWindow,
    getMainWindow
};

// electron/ipc/channels.js
module.exports = {
    FILE: {
        READ: 'file:read',
        WRITE: 'file:write',
        DELETE: 'file:delete'
    },
    SYSTEM: {
        INFO: 'system:info',
        PATHS: 'system:paths'
    },
    APP: {
        VERSION: 'app:version',
        QUIT: 'app:quit'
    }
};

// electron/ipc/handlers/file.js
const { ipcMain } = require('electron');
const fs = require('fs').promises;
const CHANNELS = require('../channels');

function setupFileHandlers() {
    ipcMain.handle(CHANNELS.FILE.READ, async (event, filePath) => {
        const content = await fs.readFile(filePath, 'utf-8');
        return content;
    });

    ipcMain.handle(CHANNELS.FILE.WRITE, async (event, filePath, content) => {
        await fs.writeFile(filePath, content);
        return true;
    });
}

module.exports = { setupFileHandlers };

// electron/ipc/index.js
const { setupFileHandlers } = require('./handlers/file');
const { setupSystemHandlers } = require('./handlers/system');
const { setupAppHandlers } = require('./handlers/app');

function setupIpc() {
    setupFileHandlers();
    setupSystemHandlers();
    setupAppHandlers();
}

module.exports = { setupIpc };

1. 按功能模块划分
2. 主进程与渲染进程代码分离
3. 共享代码抽取到独立模块
4. 配置文件集中管理
5. 资源文件统一存放

// electron/main/window.js
function createMainWindow() {
    const mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: false,           // 禁用 Node.js 集成
            contextIsolation: true,           // 启用上下文隔离
            enableRemoteModule: false,        // 禁用 remote 模块
            sandbox: true,                    // 启用沙箱
            webSecurity: true,                // 启用 Web 安全
            allowRunningInsecureContent: false
        }
    });

    return mainWindow;
}

// electron/main/index.js
const isDev = process.env.NODE_ENV === 'development' || !app.isPackaged;

if (isDev) {
    // 开发环境配置
    require('electron-reload')(__dirname);
    mainWindow.webContents.openDevTools();
} else {
    // 生产环境配置
    mainWindow.setMenu(null);
}