Electron 项目启动指南
electron-starterExample Electron app项目地址:https://gitcode.com/gh_mirrors/el/electron-starter
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
electron-starterExample Electron app项目地址:https://gitcode.com/gh_mirrors/el/electron-starter