从零开始构建 Electron + React + Ts + Webpack + Electron-builder 项目

前言

Electron 是一个开源的跨平台桌面应用程序框架，允许您使用 JavaScript、HTML 和 CSS 构建桌面应用程序。Electron 应用程序可以在 Windows、macOS 和 Linux 上运行。

React 是一个流行的 JavaScript 库，用于构建用户界面。React 采用声明式编程范式，使您可以轻松创建交互式和动态的应用程序。

TypeScript 是 JavaScript 的超集，它增加了类型系统。TypeScript 使您能够编写更健壮、更易维护的 JavaScript 代码。

Webpack 是一个模块捆绑工具，用于将多个 JavaScript 模块打包成一个或多个文件。Webpack 可以与 React 和 TypeScript 一起使用，以优化您的应用程序的构建过程。

Electron-builder 是一个工具，可以帮助您将 Electron 应用程序打包为可独立运行的安装程序。Electron-builder 支持 Windows、macOS 和 Linux 平台。

创建 React + TypeScript 项目

首先，我们需要创建一个 React + TypeScript 项目。您可以使用 create-react-app 工具来创建一个新的 React 项目。

npx create-react-app my-electron-app --template typescript

这将创建一个名为 my-electron-app 的新项目。该项目将使用 TypeScript 作为其编程语言。

添加 Electron

接下来，我们需要将 Electron 添加到我们的项目中。

npm install electron --save-dev

这将在您的项目中安装 Electron。

安装依赖

现在，我们需要安装一些其他的依赖项。

npm install electron-packager --save-dev
npm install electron-builder --save-dev

这将在您的项目中安装 Electron Packager 和 Electron Builder。Electron Packager 是一个工具，可以帮助您将 Electron 应用程序打包成可独立运行的安装程序。Electron Builder 是一个更高级的工具，它可以帮助您为您的应用程序创建更加复杂的安装程序。

创建主进程入口文件

在您的项目中，创建一个名为 main.js 的文件。此文件将作为您的应用程序的主进程入口文件。

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

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 加载应用的主页
  win.loadFile('index.html');

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

// 当 Electron 初始化完成时，创建窗口
app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

运行应用程序

现在，我们可以运行我们的应用程序。

npm start

这将启动您的应用程序的开发服务器。您可以在浏览器中打开 http://localhost:3000 来查看您的应用程序。

打包应用程序

现在，我们可以使用 Electron Builder 将我们的应用程序打包为可独立运行的安装程序。

npx electron-builder build

这将在您的项目中创建一个名为 dist 的目录。该目录将包含您的应用程序的可独立运行的安装程序。

总结

在本教程中，我们学习了如何使用 Electron、React、TypeScript、Webpack 和 Electron-builder 从头开始构建一个跨平台桌面应用程序。我们从创建一个简单的 React + TypeScript 项目开始，然后逐步添加 Electron 和其他必要的依赖项。最后，我们学习了如何使用 Electron-builder 将应用程序打包为可独立运行的安装程序。