构建 Electron 框架：从零开始搭建现代化桌面应用

2024-01-13 19:59:09

前言

Electron 以其强大的跨平台能力和丰富的原生 API，为构建现代桌面应用提供了令人兴奋的途径。本文将带领你从零开始搭建一个基于 Electron、React、Mobx、Webpack 4 和 TypeScript 的 Electron 应用程序框架。我们将分步指导你完成从集成基本功能到优化 webpack 配置的各个步骤。

Electron 集成

单窗口应用

对于单窗口应用，你需要在 main.js 文件中创建 BrowserWindow 实例并加载 index.html 文件：

const { BrowserWindow } = require('electron');

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 });

  win.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();
});

多窗口应用

对于多窗口应用，你需要在 main.js 中创建多个 BrowserWindow 实例，并为每个窗口加载不同的 HTML 文件：

const { BrowserWindow } = require('electron');

function createWindow (name) {
  const win = new BrowserWindow({ width: 800, height: 600 });

  win.loadFile(`window-${name}.html`);
}

app.whenReady().then(() => {
  createWindow('main');
  createWindow('settings');
});

React、Mobx 和 TypeScript 集成

React

在 index.js 文件中，使用 ReactDOM.render 将 React 应用渲染到 DOM：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Mobx

使用 Mobx 来管理状态，在 app.js 文件中创建一个可观察的存储：

import { makeAutoObservable } from 'mobx';

class AppStore {
  constructor() {
    makeAutoObservable(this);
  }

  // ...
}

export default new AppStore();

TypeScript

为了使用 TypeScript，你需要在你的项目中安装 typescript 和 @types/electron：

npm install --save-dev typescript @types/electron

然后，将你的代码文件扩展名为 .ts，并配置 tsconfig.json 以指定 TypeScript 编译器选项。

webpack 配置优化

开发模式

在开发模式下，使用 webpack dev server 热重载你的应用程序：

// webpack.config.js
module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

生产模式

在生产模式下，使用 webpack-bundle-analyzer 分析包大小：

npm install --save-dev webpack-bundle-analyzer

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    // ...
    new BundleAnalyzerPlugin()
  ]
};