只用一行命令！快速搭建一个完善的Electron项目

Alex114
1,528 阅读5分钟

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…

大家好，我是鸿雁。我们在 Electron 开发工作中，常常会遇到一些这样的问题：

  • 如何搭建项目（官方示例无法满足开发需求）
  • 如何搭配现代前端框架（vue，react， ……）
  • 如何用TypeScript开发
  • 如何构建编译（vite，parcel，……）
  • 如何打包应用程序（electron-builder， electron-forge）
  • ……

下面我们就来详细介绍，如何用命令行脚手架的方式，快速搭建一个完善的 Electron 项目，帮助开发者解决这些难题。

快速开始

在命令行中执行以下命令：

npm init @quick-start/electron

该命令将安装并执行脚手架工具 create-electron 。你将看到一些可选功能的提示，例如框架 (vue, react, ...) 和 TypeScript 支持：

✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes

Scaffolding project in ./<electron-app>...
Done.

创建项目后，按照说明安装依赖项并启动Electron程序：

> cd <electron-app>
> npm install
> npm run dev

项目主体目录结构(以 Vue + TypeScript 为例)：

.
├──.vscode
│  └──...
├──build #打包资源
│  ├──entitlements.mac.plist
│  ├──icon.icns
│  ├──icon.ico
│  ├──icon.png
│  └──notarize.js
├──src # 主代码
│  ├──main # 主进程
│  │  └──index.ts
│  ├──preload # preload脚本
│  │  ├──index.d.ts
│  │  └──index.ts
│  └──renderer # 渲染进程，结合 vue/react/svelte
│     ├──src
│     │  ├──assets
│     │  ├──components
│     │  ├──App.vue
│     │  ├──env.d.ts
│     │  └──main.ts
│     └──index.html
├──.editorconfig
├──.eslintrc.cjs
├──.prettierrc.yaml
├──electron-builder.yml #打包配置
├──electron.vite.config.ts #构建配置
├──package.json
├──tsconfig.json
├──tsconfig.node.json
└──tsconfig.web.json

运行示例截图：

screenshot.png

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Electron + Vue3 项目，运行:

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

当前支持的预置模板:

  • sample
  • sample-ts
  • vue
  • vue-ts
  • react
  • react-ts
  • svelte
  • svelte-ts

功能特征

  • 使用 ESLint + Prettier 更好的代码风格和质量检查，帮助你编写高质量的代码
  • 使用 electron-vite，一个与 Vite 集成非常快的构建工具，简单易用无需关注配置。
  • 使用 electron-toolkit 提供的实用API，辅助开发。
  • 使用 electron-builder 并预设打包配置，让你轻松打包。

开发模式

在第一节中，我们可以看到主代码分为三部分 main、preload、renderer 。

  • main：主进程实现，管理应用程序生命周期，创建和管理窗口，提供原生API服务等
  • preload: 预载脚本，作为渲染进程访问主进程的桥
  • renderer: 渲染进程，结合现代前端框架开发UI界面

需要注意的是，脚手架是基于安全实践的基础来搭建项目模板。

很多开发者和社区模板，都会通过开启node集成（nodeIntegration）和 关闭上下文隔离（contentIsolation）的方式来开发。尽管这可以获得一点点的开发效率，但不应该被推荐，这是很不安全的做法。在 Electron 中，不仅仅是浏览器，它还提供很多强大的功能，如文件系统访问，shell等。想一想如果你的程序存在一个 XSS 漏洞，那么攻击者就可以通过脚本调用nodejs做很多事情，比如删除你的系统文件，这是很可怕的。查看那些知名的 Electron 应用程序，你会发现都不会采用这样的开发方式。

开发构建 - electron-vite

Electron 项目开发构建知识点：

  • 主进程和预加载脚本，需基于 cjs 模块化标准构建，运行在 node 环境
  • 渲染进程，通常融合现代前端框架如 vue.js，react 等基于 iife 模块化标准构建，运行在浏览器环境

脚手架项目模板搭配了 electron-vite 构建工具，帮助开发者轻松完成开发构建。

什么是 electron-vite ？

electron-vite 是一个与 Vite 集成的 Electron 构建工具。开发者无需过多关注配置，无论选择哪种前端框架都能轻松完成构建，提高 Electron 的开发构建效率。

它具有以下几个优点：

  • 使用方式与 Vite 相同
  • 主进程/渲染进程/preload脚本都使用 Vite 构建
  • 统一所有配置，合并到一个文件中
  • 预设构建配置，无需关注配置
  • 支持渲染进程热更新(HMR)

在项目模板中，你可以通过以下 npm scripts 命令，进行构建开发。

{
  "scripts": {
    "start": "electron-vite preview", // 开启 electron 程序预览生产构建
    "dev": "electron-vite dev", // 开启开发服务（HMR） 和 electron 程序
    "build": "electron-vite build" // 为生产构建
  }
}

开发构建配置都集中在 electron.vite.config.js 配置文件中，最基本的配置文件如下所示：

// electron.vite.config.js
export default {
  main: {
    // vite config options
  },
  preload: {
    // vite config options
  },
  renderer: {
    // vite config options
  }
}

配置方式和 Vite 一致，通常是无需怎么配置的，因为 electron-vite 做了很多预置配置，简化开发者的配置工作。

electron-vite 非常简单易用，你也可以在现有的项目中使用它，更多详细的信息，可以参考

github.com/alex8088/el…

开发辅助 - electron-toolkit

项目模板还搭配了electron-toolkit 开发工具包，来辅助开发。

uitls 工具库，提供了一些实用的API：

  • is
  • platform
  • electronApp
  • ipcHelper
  • optimizer

代码示例：

// 判断平台
platform.isWindows

// 设置开机自启
electronApp.setAutoLaunch()

// 监视快捷键，如F12在开发模式下打开devTool，不需要手动写代码开启
optimizer.watchWindowShortcuts()

preload 工具库，用于向渲染进程暴露 Electron APIs (ipcRenderer,webFrame,process)

代码示例：

// preload 脚本
import { electronAPI } from '@electron-toolkit/preload'

exposeElectronAPI()

// 渲染进程中
window.electron.ipcRenderer.send('electron:say', 'hello')

window.electron.ipcRenderer.invoke('electron:doAThing', '').then(re => {
  console.log(re)
})

window.electron.ipcRenderer.on('electron:reply', (_, args) => {
  console.log(args)
})

在项目模板中，由于使用了preload工具库，preload 脚本基本上不需要开发。

关于 electron-toolkit 的更多信息，请参考：

github.com/alex8088/el…

打包程序

项目模板内置了 electron-builder 打包工具，并预设打包配置，让你轻松打包。

预设配置包括了 windows 、macOS 、linux 三个平台，无需逐一配置。

通常开发者只需要将 build 目录下的相关图标资源替换，并更替 electron-builder.yml 文件中的 appId 配置项即可。当然，开发者也可以根据自己打包需求，修改配置文件项，更多配置可参考其官方文档：

www.electron.build/

结语

create-electron 项目现在已经开源，欢迎各位感兴趣的小伙伴参与贡献提交 PR 或反馈 issue，给予 star 支持。

github.com/alex8088/qu…

avatar
文章
阅读
粉丝