藉助 Parcel 搭建 Electron 應用開發環境
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 裏註釋就是中文的，如下圖所示。
現在的目錄結構是這樣的
├── package.json
├── public
│ └── template.html
├── src
│ └── renderer
│ └── index.tsx
├── tsconfig.json
└── yarn.lock
template.html 模版中，我簡單寫了如下代碼。 ```html
``
我自己項目中是用 webpack 來編譯代碼的，這裏為了方便，我選擇使用 [parcel](https://parceljs.org/) 來編譯 renderer 代碼。接下來，命令行運行yarn parcel public/template.html, 訪問http://localhost:1234`(默認端口 1234) 就可以看到 web 界面了。
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，就可以看到應用啟動了。
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 是否成功注入到頁面裏了。
看起來已經成功注入到頁面中。
這個例子不是很能體現 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); }); ``` 讓我們再測試一下。
生產環境
之前的 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') }) }) ```
到這裏，基本的開發環境已經配置好了，接下來就可以愉快的開發了。
總結
用 Parcel 來編譯代碼，明顯比 Webpack 方便了很多。
該項目的代碼我放在這裏了 ENotes