Electron 项目启动指南

1. 项目的目录结构及介绍

electron-starter/
├── src/
│   ├── index.js
│   └── utils/
├── .gitignore
├── index.html
├── main.js
├── package.json
├── readme.md
└── webpack.config.js

• src/: 包含项目的源代码文件。
  • index.js: JavaScript 入口点文件。
  • utils/: 包含项目中使用的工具函数或模块。
• .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
• index.html: 项目的主页面文件。
• main.js: 项目的启动文件，负责创建浏览器窗口。
• package.json: 项目的配置文件，包含依赖项和脚本命令。
• readme.md: 项目的说明文档。
• webpack.config.js: Webpack 的配置文件，用于打包和构建项目。

2. 项目的启动文件介绍

main.js

main.js 是 Electron 应用的主进程文件，负责启动应用并创建浏览器窗口。以下是 main.js 的基本结构：

const { app, BrowserWindow } = require('electron');
const path = require('node:path');

const createWindow = () => {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // 加载 index.html
  mainWindow.loadFile('index.html');

  // 打开开发者工具
  // mainWindow.webContents.openDevTools();
};

// 当 Electron 完成初始化并准备好创建浏览器窗口时调用此方法
app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    // 在 macOS 上，当点击 dock 图标且没有其他窗口打开时，通常会重新创建一个窗口
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// 当所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

3. 项目的配置文件介绍

package.json

package.json 是 Node.js 项目的配置文件，包含项目的基本信息、依赖项和脚本命令。以下是 package.json 的基本结构：

{
  "name": "electron-starter",
  "version": "1.0.0",
  "description": "A minimal Electron starter",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^X.X.X"
  },
  "devDependencies": {
    "webpack": "^X.X.X",
    "babel-loader": "^X.X.X"
  }
}

• name: 项目的名称。
• version: 项目的版本号。
• description: 项目的描述。
• main: 指定项目的主入口文件。
• scripts: 定义可执行的脚本命令，例如 npm start。
• dependencies: 项目的运行时依赖。
• devDependencies: 项目的开发时依赖。

webpack.config.js

webpack.config.js 是 Webpack 的配置文件，用于打包和构建项目。以下是 webpack.config.js 的基本结构：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

• entry: 指定 Webpack