借助 Parcel 搭建 Electron 应用开发环境

语言: CN / TW / HK
时间 2022-10-10 08:15:07
主题:
ead>

theme: juejin

本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

前言

先对这个系列的专栏做一个简单的介绍。

本专栏主要是通过 Electron 和 ProseMirror 两个框架来开发一个本地的 Markdown 编辑器，UI 框架我会选择 React，然后使用 Typescript 来开发。专栏的内容会涉及到更新升级、自定义窗口、多 tab 栏的实现、跨进程通信、Sqlite 数据库实践、应用上架等。

虽然这个项目是从零开发，但是不会讲解太多的关于如何配置 Webpack 等方面的知识，相关内容你们可以搜索其他博文进行学习。当然，有任何问题欢迎直接在评论区提问，我会进行解答。

本文所示代码均在 Github 仓库中

main 和 renderer

使用过 Electron 的同学都知道 main主进程 和 renderer渲染进程。

main 负责使用 Nodejs 处理和系统交互的部分，renderer 负责渲染呈现在用户面前的 UI 界面。他俩通过 IPC 进行通信。

当我们要开始开发一个 electron 项目时，这里以主流的构建工具 Webpack 为例。当编译 main 代码时，编译目标要选择 electron-main，这样生产依赖的库的代码就不会打包到最终的 main.js 中，依旧保持类似 const fse = require("fs-extra") 的形式，在 runtime 时动态从 app.asar 里的 node_modules 里引入。而编译 renderer 时，以往我们是选择 electron-renderer，现在 electron 提供了一种 preload 的方式后，我们可以直接选择 web 为编译目标，这样 renderer 的代码里也不用混杂一些 node 代码了。

新特性 preload，类似于混合开发中的 JSBridge, 借助 contextBridge.exposeInMainWorld('JSBridge', {}) 可以往页面中注入一个对象用来和 native 部分进行交互，在 electron 中就是和 main 主进程进行交互。

这个新设计带来的好处是显而易见的 。当你想要将一个 web 应用改造成拥有原生能力的桌面应用时，你只要在 preload 中实现一个 sdk，就能很简单的将 web 应用接入进来。另一方面，禁止在renderer 中执行 node 代码，大大提高了安全性（防止有的库会用 nodejs 违规操作用户系统）。

这里简单看一下，我们要如何使用 preload： javascript const win = new BrowserWindow({ width: 800, height: 600, show: false, webPreferences: { nodeIntegration: true, nodeIntegrationInSubFrames: true, devTools: app.isPackaged ? false : true, contextIsolation: true, preload: path.join(app.getAppPath(), './static/preload.js'), }, })

上面的 preload 我用的是编译后的文件，preload 的编译也是采用 electron-main 的标准。

renderer 渲染进程

我们现在开始创建项目，我给它取名为 ENotes。

bash mkdir enotes cd enotes yarn init -y

添加 React、ReactDom 等依赖库

bash yarn add react react-dom yarn add parcel typescript @types/react @types/react-dom -D yarn tsc --init --locale zh-cn

经常有同学会抱怨 tsconfig.json 不会配置，注意上面我加了 --locale zh-cn 的参数，这样生成出来的 tsconfig.json 里注释就是中文的，如下图所示。

image.png

现在的目录结构是这样的 ├── package.json ├── public │ └── template.html ├── src │ └── renderer │ └── index.tsx ├── tsconfig.json └── yarn.lock

template.html 模版中，我简单写了如下代码。 ```html

Document

`` 我自己项目中是用 webpack 来编译代码的，这里为了方便，我选择使用 [parcel](https://parceljs.org/) 来编译 renderer 代码。接下来，命令行运行yarn parcel public/template.html, 访问http://localhost:1234`(默认端口 1234) 就可以看到 web 界面了。

image.png

main 主进程

光有 web 页面还不行，我们用 electron 给它加件衣服。我们先安装 electron

bash yarn add electron

接下来我们要实现

~~~mermaid graph LR 启动应用 --> 显示窗口 --> 加载网页 ~~~

```javascript // src/main/index.ts import { app, BrowserWindow } from "electron"; import path from "path";

function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, show: false, webPreferences: { devTools: app.isPackaged ? false : true, }, }); return win; }

app.whenReady().then(() => { const win = createWindow(); app.isPackaged ? win.loadFile(path.join(app.getAppPath(), "dist", "template.html")) : win.loadURL("http://localhost:1234");

win.webContents.on("dom-ready", () => { win.show(); }); }); ```

main 主进程代码，依旧使用 parcel 来编译。在项目根目录下创建 config/main.mjs 文件，如下。

```javascript import { Parcel } from "@parcel/core";

let bundler = new Parcel({ entries: "./src/main/index.ts", defaultConfig: "@parcel/config-default", targets: { main: { distDir: "dist", context: "electron-main" }, }, });

await bundler.run(); ``` 我们在 package.json 的 scripts 中添加一些启动脚本。

concurrently 可以同时运行多个 npm 脚本

bash yarn add concurrently -D

json // package.json { "scripts": { "start": "concurrently \"npm:start:renderer\" \"npm:start:main\"", "start:renderer": "parcel public/template.html", "start:main": "node config/main.mjs && electron dist/index.js" } }

运行一下 yarn start，就可以看到应用启动了。

image.png

preload 预加载脚本

接下来我们要使用 preload 为网页增加点原生功能，看看一个简单的 preload 该如何写。

```typescript // src/main/preload.ts import { contextBridge } from "electron";

contextBridge.exposeInMainWorld("Bridge", { test: () => { console.log("bridge is working"); }, }); ```

同样需要配置 config/preload.mjs, 可以参考 main.mjs。

我们把之前代码里的 createWindow 调整下，让页面预加载 preload。

typescript function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, show: false, webPreferences: { nodeIntegration: true, nodeIntegrationInSubFrames: true, devTools: app.isPackaged ? false : true, contextIsolation: true, preload: path.join(app.getAppPath(), "dist", "preload.js"), }, }); return win; }

在 package.json 中的 scripts 加上 preload 的编译。

json { "scripts": { "start": "concurrently \"npm:start:renderer\" \"npm:start:preload\" \"npm:start:main\"", "start:renderer": "parcel public/template.html", "start:preload": "node config/preload.mjs", "start:main": "node config/main.mjs && electron dist/index.js" } }

使用 win.webContents.openDevTools({ mode: "detach" }); ，或者窗口显示以后，用快捷键 CmdOrCtrl+Shift+I， 打开 devtools。我们测试一下 bridge 是否成功注入到页面里了。

image.png

看起来已经成功注入到页面中。

这个例子不是很能体现 preload 的作用，我们换一个，实现一个 showMessage 方法，调用 electron 的提示弹窗。

```typescript // src/main/preload.ts import { contextBridge, ipcRenderer, MessageBoxOptions } from "electron";

contextBridge.exposeInMainWorld("Bridge", { showMessage: (options: MessageBoxOptions) => { ipcRenderer.invoke("showMessage", options); }, });

```

```typescript // src/main/index.ts import { dialog, MessageBoxOptions } from 'electron'

ipcMain.handle("showMessage", (_e, options: MessageBoxOptions) => { // win 是之前创建的窗口 dialog.showMessageBox(win, options); }); ``` 让我们再测试一下。

image.png

生产环境

之前的 npm 脚本并没有区分环境，我们需要通过设置环境变量来实现这个。

cross-env 可以很方便地设置环境变量

bash yarn add cross-env -D

"start:main": "cross-env NODE_ENV=development node config/main.mjs && electron dist/index.js"

单元测试

为了保证代码的可靠性，我们还需要为项目添加单元测试、e2e测试等。由于 Electron 不适合做 e2e 测试，所以这里我就添加单元测试，用的是最近很火的 Vitest。

bash yarn add vitest -D

```js // vitest.config.js import { defineConfig } from "vitest/config";

export default defineConfig({ test: { include: ["/tests//.[jt]s?(x)", "/?(.)+(spec|test).[tj]s?(x)"], }, });

json { "scripts": { "test": "vitest" } } ``` 这样就配置好了，是不是很简单。我们简单写一个示例测试一下。

```ts // src/utils/node/index.ts import { basename, extname } from "path";

export function getFileNameWithoutExt(filePath: string) { const name = basename(filePath); const ext = extname(filePath); return name.substring(0, name.lastIndexOf(ext)); } ts // src/utils/node/tests/index.test.ts import { describe, test, expect } from 'vitest' import { getFileNameWithoutExt } from '..'

describe('utils', () => { test('getFileName', () => { const filePath = '/xx/test.md' const fileName = getFileNameWithoutExt(filePath) expect(fileName).toEqual('test') }) }) ```

image.png

到这里，基本的开发环境已经配置好了，接下来就可以愉快的开发了。

总结

用 Parcel 来编译代码，明显比 Webpack 方便了很多。

该项目的代码我放在这里了 ENotes

「」