Electron + Typescript + cra，一个Electron应用的搭建模板

2024-02-03 04:24:46

大家好，我是程序员小王。今天，我将分享一个使用 Typescript 搭建基于 CRA 的 Electron 模板的方法。Electron 是一种用于构建跨平台桌面应用程序的框架，而 CRA（Create React App）是一个用于创建 React 应用程序的工具。

为什么选择 Electron + Typescript + CRA？

Electron + Typescript + CRA 是一种流行的技术组合，因为它具有以下优点：

跨平台： Electron 允许您使用相同的代码库构建适用于 Windows、Mac 和 Linux 的应用程序。
高性能： Electron 使用 Chromium 作为其底层引擎，这使得 Electron 应用程序具有很高的性能。
可扩展： Electron 应用程序可以轻松地扩展，以添加新功能和集成第三方库。
TypeScript： TypeScript 是一种强类型的语言，可以帮助您编写更健壮、更易维护的代码。
CRA： CRA 可以帮助您快速轻松地创建 React 应用程序。

搭建步骤

首先，我们需要安装 Electron 和 CRA。您可以使用以下命令安装 Electron：

npm install electron

然后，您可以使用以下命令安装 CRA：

npx create-react-app electron-app

现在，您已经安装了 Electron 和 CRA，可以开始搭建 Electron 模板了。

在 electron-app 文件夹中，创建一个名为 main.js 的文件。
在 main.js 文件中，添加以下代码：

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

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

  // 加载index.html文件
  win.loadFile('index.html')

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

// 当 Electron 完成初始化并准备创建浏览器窗口时，调用 createWindow 函数
app.whenReady().then(createWindow)

// 当所有窗口都关闭时退出应用程序。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定性地退出，否则应用程序
  // 会一直运行。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在 macOS 上，当单击dock图标且没有其他窗口打开时，
  // 应用程序将被重新激活。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

在 electron-app 文件夹中，创建一个名为 package.json 的文件。
在 package.json 文件中，添加以下代码：

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "Electron + Typescript + CRA 应用模板",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js",
    "dev": "electron-rebuild-webpack"
  },
  "dependencies": {
    "electron": "^20.0.0",
    "electron-rebuild-webpack": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}