前言

如果你有桌面應(yīng)用開(kāi)發(fā)的需求，且比較熟悉 Web 相關(guān)的技術(shù)，那么 Electron 會(huì)是一個(gè)非常不錯(cuò)的選擇，作為一個(gè)使用 Web 技術(shù)構(gòu)建跨平臺(tái)桌面應(yīng)用的框架，其允許開(kāi)發(fā)者使用JavaScript、HTML 和 CSS 等 Web 技術(shù)來(lái)構(gòu)建桌面應(yīng)用；同時(shí)，Electron 擁有一個(gè)活躍的社區(qū)和豐富的生態(tài)系統(tǒng)，這不僅意味著開(kāi)發(fā)者可以輕松找到解決問(wèn)題的資源和工具，還意味著框架的更新和改進(jìn)是持續(xù)不斷的，能夠緊跟技術(shù)發(fā)展的步伐

本文將介紹如何用其構(gòu)建一個(gè)應(yīng)用 Demo 項(xiàng)目

介紹

創(chuàng)建 Electron 應(yīng)用程序項(xiàng)目的方式有很多，如手動(dòng)集成、electron-vite 快速構(gòu)建等，本文將介紹通過(guò) electron-forge 構(gòu)建的方式

主要環(huán)境

• electron-forge v7.6
• webpack
• react
• typescript

Electron Forge 介紹

Electron Forge 是一個(gè)用于打包和分發(fā) Electron 應(yīng)用程序的一體化工具，可以認(rèn)為是 Electron Builder 的替代品，它提供了一個(gè)全面的解決方案，包括初始化項(xiàng)目、本地開(kāi)發(fā)、打包和發(fā)布，同時(shí)，其簡(jiǎn)化了 Electron 應(yīng)用的開(kāi)發(fā)和打包流程，使得開(kāi)發(fā)者可以更專(zhuān)注于應(yīng)用本身的開(kāi)發(fā)

具體步驟

項(xiàng)目構(gòu)建步驟主要如下，如果你需要源碼，可從文末獲取：

創(chuàng)建 electron 項(xiàng)目

在開(kāi)始前，需先備有對(duì)應(yīng)的工具，如：npm或yarn

本例使用的是npm，使用yarn的命令也差不多

通過(guò)模板創(chuàng)建項(xiàng)目

模板集成了一些項(xiàng)目構(gòu)建工具，可以更為方便的為項(xiàng)目加入插件，主要提供了如下模板：

• webpack
• webpack-typescript
• vite
• vite-typescript

創(chuàng)建命令

選擇合適的模板后，按照下列命令創(chuàng)建項(xiàng)目

npm init electron-app@latest [project-name] -- --template=[template-name]

• [project-name]：表示項(xiàng)目名
• [template-name]：表示模板名，在上側(cè)提供的里面選擇

開(kāi)始創(chuàng)建

本例使用命令如下：

npm init electron-app@latest demo -- --template=webpack-typescript

該模板集成了webpack和typescript的能力

如果你選用vite相關(guān)模板，需注意：

創(chuàng)建好項(xiàng)目后的package.json依賴(lài)內(nèi)容如下：

"devDependencies": {
  "@electron-forge/cli": "^7.6.0",
  "@electron-forge/maker-deb": "^7.6.0",
  "@electron-forge/maker-rpm": "^7.6.0",
  "@electron-forge/maker-squirrel": "^7.6.0",
  "@electron-forge/maker-zip": "^7.6.0",
  "@electron-forge/plugin-auto-unpack-natives": "^7.6.0",
  "@electron-forge/plugin-fuses": "^7.6.0",
  "@electron-forge/plugin-webpack": "^7.6.0",
  "@electron/fuses": "^1.8.0",
  "@typescript-eslint/eslint-plugin": "^5.0.0",
  "@typescript-eslint/parser": "^5.0.0",
  "@vercel/webpack-asset-relocator-loader": "1.7.3",
  "css-loader": "^6.0.0",
  "electron": "33.2.1",
  "eslint": "^8.0.1",
  "eslint-plugin-import": "^2.25.0",
  "fork-ts-checker-webpack-plugin": "^7.2.13",
  "node-loader": "^2.0.0",
  "style-loader": "^3.0.0",
  "ts-loader": "^9.2.2",
  "ts-node": "^10.0.0",
  "typescript": "~4.5.4"
},
"dependencies": {
  "electron-squirrel-startup": "^1.0.1"
}

如果命令一直創(chuàng)建失敗，可能是網(wǎng)絡(luò)問(wèn)題，可考慮使用一些鏡像站

試運(yùn)行

創(chuàng)建好項(xiàng)目后，可以進(jìn)入項(xiàng)目根目錄，用執(zhí)行如下命令，嘗試是否可以正常運(yùn)行：

# 運(yùn)行npm start

除此運(yùn)行可能會(huì)報(bào)一些類(lèi)型錯(cuò)誤，大致如下：

Failed to load: ...\...\ele-react-demo\forge.config.ts
An unhandled rejection has occurred inside Forge:
TSError:
1. ? Unable to compile TypeScript:
forge.config.ts:1:34 - error TS2307: Cannot find module '@electron-forge/shared-types' or its corresponding type declarations.

按照錯(cuò)誤提示添加上相關(guān)依賴(lài)即可，可能需要添加的依賴(lài)如下

"devDependencies": {
    "@electron-forge/shared-types": "^7.6.0",
    "@electron-forge/maker-base": "^7.6.0",
    "@electron-forge/plugin-base": "^7.6.0",
    "webpack": "^5.97.0",
    "@types/node": "^22.10.1"
}

添加完缺少的依賴(lài)后，再次運(yùn)行npm start啟動(dòng)項(xiàng)目，如運(yùn)行成功，可看到如下界面

可以看到，默認(rèn)會(huì)啟動(dòng)開(kāi)發(fā)者工具，這是由于src/index.ts內(nèi)的代碼設(shè)置的，如下：

如不需要，可將其注釋或刪除，需要打開(kāi)開(kāi)發(fā)者工具時(shí)通過(guò)快捷鍵 Ctrl + Shift + I (windows 系統(tǒng))打開(kāi)即可

試打包

當(dāng)編寫(xiě)好項(xiàng)目后，需進(jìn)行打包，可運(yùn)行如下命令：

# 打包
npm run make

打包好后，項(xiàng)目根目錄會(huì)出現(xiàn)一個(gè)out目錄，內(nèi)部即是打包好的文件；打包會(huì)檢測(cè)本機(jī)系統(tǒng)，然后生成對(duì)應(yīng)的打包文件

正常打包好后，內(nèi)部會(huì)有兩個(gè)目錄，一個(gè)為make目錄，里面有對(duì)應(yīng)系統(tǒng)的二進(jìn)制安裝程序，如exe；另一個(gè)目錄(如**-win32-x64)，里面為對(duì)應(yīng)系統(tǒng)的便攜式免安裝程序，點(diǎn)擊產(chǎn)品名.exe即可打開(kāi)應(yīng)用，此目錄內(nèi)有個(gè)resource文件夾，裝著項(xiàng)目編譯的一些內(nèi)容，如app.asar

asar 解包方法

asar文件類(lèi)似一種壓縮包，通過(guò)對(duì)應(yīng)的工具可以對(duì)其進(jìn)行解包，得到實(shí)際的文件

• 安裝解包工具：npm install -g asar
• 運(yùn)行命令解包：asar extract app.asar ./app (該命令會(huì)將 app.asar 解包到當(dāng)前目錄的 app 目錄下)

解包后，目錄內(nèi)會(huì)有如下結(jié)構(gòu)：

.webpack     # 項(xiàng)目編譯部分
 ├- main     # electron 部分
 └- renderer # web 部分
node_modules # 項(xiàng)目依賴(lài)
package.json

如果你是用vite模板構(gòu)建項(xiàng)目，文件名稱(chēng)可能稍有差別，但結(jié)構(gòu)大致類(lèi)似

集成 React

集成 React 可以讓 UI 開(kāi)發(fā)變得更為方便

安裝依賴(lài)

首先安裝對(duì)應(yīng)依賴(lài)，如下：

# 安裝 React 包
npm install --save react react-dom
# 安裝 React 類(lèi)型支持相關(guān)包
npm install --save-dev @types/react @types/react-dom

修改 tsconfig

修改項(xiàng)目根目錄下的tsconfig.json，在 compilerOptions 下添加如下內(nèi)容：

"compilerOptions": {
  "jsx": "react-jsx"
}

修改項(xiàng)目文件

在項(xiàng)目?jī)?nèi)使用React組件的能力，首先在src目錄下新建文件app.tsx，內(nèi)容如下：

/** src/app.tsx */
import { createRoot } from 'react-dom/client';
import { useState } from 'react';
// 主應(yīng)用
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Hello React</h1>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
    </>
  );
}
const root = createRoot(document.body);
root.render(<App />);

接著，在src/renderer.ts內(nèi)導(dǎo)入它

然后，運(yùn)行npm start啟動(dòng)項(xiàng)目，正常啟動(dòng)后如下

正常情況下，無(wú)需額外配置，項(xiàng)目即可實(shí)現(xiàn)熱重載，比如修改了app.tsx內(nèi)容后保存，無(wú)需重啟項(xiàng)目，修改內(nèi)容即可渲染出來(lái)

集成 SCSS

如果你需要使用一些 CSS預(yù)編譯器，可參考一下步驟，這里以scss舉例：

安裝依賴(lài)

需安裝sass相關(guān)依賴(lài)，如下：

npm install --save-dev sass sass-loader

配置 loader

修改項(xiàng)目根目錄下的 webpack.renderer.config.ts 文件，如下：

// webpack.renderer.config.ts
// ··· ···
// 加入對(duì)對(duì)應(yīng)樣式文件的解析規(guī)則
rules.push({
  test: /\.(sass|scss|css)$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
});
// ··· ···

使用 SCSS

重命名src目錄下的樣式文件，將index.css改為index.scss，然后即可在文件內(nèi)添加scss樣式規(guī)則，例如：

/* index.scss */
body {
  h1 {
    color: #68945c;
  }
}

導(dǎo)入 SCSS

將index.scss導(dǎo)入src/renderer.ts內(nèi)部使用

接著，npm start啟動(dòng)項(xiàng)目，查看效果

可以看到，scss的樣式已可正常渲染

配置靜態(tài)資源

如果你在項(xiàng)目?jī)?nèi)使用了一些靜態(tài)資源(如圖片)，如下：

我在src目錄下新建了一個(gè)assets目錄，專(zhuān)門(mén)用于放置靜態(tài)資源，現(xiàn)在里面放了一張圖片；然后我在app.tsx內(nèi)引用了它；接著啟動(dòng)項(xiàng)目，如果沒(méi)有意外，可以看到圖片并不會(huì)顯示，控制臺(tái)會(huì)報(bào)錯(cuò)找不到對(duì)應(yīng)資源，查看編譯后的.webpack目錄，發(fā)現(xiàn)缺少?zèng)]有對(duì)應(yīng)的圖片資源

這是由于靜態(tài)資源沒(méi)有被正確加載或復(fù)制，以下介紹兩種簡(jiǎn)單可行的方式，僅供參考：

方法一

此方法僅配置打包后的靜態(tài)資源，具體步驟如下：

配置 forge.config.ts

const config: ForgeConfig = {
  packagerConfig: {
    asar: true,
    // 通過(guò)如下配置項(xiàng)，配置需打包的靜態(tài)資源
    // 該配置會(huì)將對(duì)應(yīng)資源復(fù)制到打包后的 resource 目錄下
    // 這里表示復(fù)制 src/assets 整個(gè)目錄
    // 打包后在 out/**-win32-x64/resource 目錄下，會(huì)有一個(gè) assets 目錄
    extraResource: ['./src/assets']
  }
}

使用時(shí)可以用相對(duì)路徑，也可以借助path工具

// src/app.tsx
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Hello React</h1>
      // 通過(guò)相對(duì)路徑
      // 打包后的結(jié)構(gòu)可看上方解答
      // web 部分在 resource/app.asar/.webpack/renderer/main_window
      // 資源部分在 resource/assets
      <img src="../../../../assets/images/cat.jpg" />
      // 也可以使用 path 拼接路徑，如：path.join(process.resourcesPath, 'assets/images/cat.jpg')
      // process.resourcesPath 表示 resource 目錄
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
    </>
  );
}

此時(shí)npm run make打包后，運(yùn)行打包的文件，即可看到靜態(tài)資源已經(jīng)可以正常顯示了

這種方法只適用于處理打包的靜態(tài)資源，開(kāi)發(fā)npm start運(yùn)行時(shí)依舊無(wú)法正常顯示

并且，復(fù)制的靜態(tài)資源存在于 renderer 目錄下，并為打包進(jìn) app.asar

方法二

通過(guò)一些插件實(shí)現(xiàn)，如rollup-plugin-copy、copy-webpack-plugin等，這里介紹copy-webpack-plugin的用法

首先安裝copy-webpack-plugin插件

npm install --save-dev copy-webpack-plugin

接著配置使用插件，打開(kāi)根目錄下的webpack.plugins.ts文件

以上配置會(huì)將./src/assets文件夾內(nèi)的內(nèi)容復(fù)制到./.webpack/renderer/static文件夾內(nèi)，在項(xiàng)目中使用時(shí)，只需通過(guò)./static目錄進(jìn)行訪(fǎng)問(wèn)即可，如下

// src/app.tsx
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Hello React</h1>
      // 使用靜態(tài)資源
      <img src="./static/images/cat.jpg" />
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
    </>
  );
}

此時(shí)無(wú)論是開(kāi)發(fā)運(yùn)行npm start，還是打包npm run make運(yùn)行，都能正確渲染靜態(tài)資源

這種方法不僅可以正常顯示與開(kāi)發(fā)和打包中，同時(shí)在打包時(shí)，靜態(tài)資源也會(huì)一并打包進(jìn) app.asar 內(nèi)

配置 Loading 頁(yè)面

以下內(nèi)容是一些體驗(yàn)優(yōu)化，參考即可

使用 electron 開(kāi)發(fā)，在啟動(dòng)時(shí)，會(huì)有一段白屏?xí)r間，這主要是由于窗口加載后，頁(yè)面資源還未加載渲染好造成的，在項(xiàng)目集成了Rreact、Vue后，這個(gè)問(wèn)題會(huì)愈發(fā)明顯，白屏?xí)r間會(huì)更長(zhǎng)

想要解決這個(gè)問(wèn)題，由很多方式可以參考，如：優(yōu)化資源、做一些預(yù)加載工作等

這里主要介紹一種比較簡(jiǎn)單的解決方式：加入 Loading 頁(yè)面，主要思路就是在主窗口創(chuàng)建前，先創(chuàng)建一個(gè) Loading 窗口，只用顯示簡(jiǎn)單的 Loading 頁(yè)面，然后再創(chuàng)建主窗口；窗口創(chuàng)建時(shí)默認(rèn)都隱藏，當(dāng)創(chuàng)建好后才顯示，首先顯示 Loading 窗口，待主窗口創(chuàng)建完成并準(zhǔn)備好時(shí)，隱藏 Loading 窗口，展示主窗口

首先在assets目錄下新建一個(gè)loading.html，里面存放著一個(gè)loading動(dòng)畫(huà)樣式，效果如下(可自行創(chuàng)意實(shí)現(xiàn))：

接著，創(chuàng)建窗口渲染使用它，修改src/index.ts文件

// Loading 窗口
let loadingWin: BrowserWindow;
// Loading 窗口的渲染文檔，即上側(cè)的 loading 效果
const loadingUrl = path.join(__dirname, '../renderer/static/loading.html');
/** Loading 窗口 */
const createLoading = () => {
  return new Promise((resolve, reject) => {
    loadingWin = new BrowserWindow({
      // 一開(kāi)始是否顯示
      show: false,
      width: 512,
      height: 512,
      frame: false, // 無(wú)邊框(窗口、工具欄等)，只包含網(wǎng)頁(yè)內(nèi)容
      transparent: true // 窗口是否支持透明，在做高級(jí)效果時(shí)最好為 true
    });
    // 當(dāng)窗口顯示時(shí)
    loadingWin.once('show', () => {
      resolve(true);
    });
    // 配置窗口渲染文檔
    loadingWin.loadFile(loadingUrl);
    // 顯示 Loading 窗口
    loadingWin.show();
  });
};
/** 主窗口 */
const createWindow = () => {
  // 創(chuàng)建渲染窗口
  const mainWindow = new BrowserWindow({
    // 窗口圖標(biāo)
    // icon: './assets/logo/logo.ico',
    height: 600,
    width: 800,
    // 一開(kāi)始隱藏
    show: false,
    webPreferences: {
      // 預(yù)加載腳本
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY
    }
  });
  // 主窗口準(zhǔn)備還顯示
  mainWindow.once('ready-to-show', () => {
    // 隱藏 Loading 窗口
    loadingWin.hide();
    // 關(guān)閉 Loading 窗口
    loadingWin.close();
    // 展示 主窗口
    mainWindow.show();
  });
  // 為窗口加載 index.html
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
  // 打開(kāi)開(kāi)發(fā)者工具
  // mainWindow.webContents.openDevTools();
};
// 當(dāng) Electron 初始化完成并準(zhǔn)備創(chuàng)建渲染窗口(mainWindow)時(shí)調(diào)用
// 某些 API 只能在此事件發(fā)生后使用
// app.on('ready', createWindow);
app.on('ready', async () => {
  // 先創(chuàng)建 Loading 窗口
  await createLoading();
  // 再創(chuàng)建 主窗口
  createWindow();
});

加入loading窗口后，白屏?xí)r間可以顯著改善，程序啟動(dòng)后，會(huì)先顯示loading窗口，待主窗口完全準(zhǔn)備好后再顯示主窗口，效果大致如下：

【一張動(dòng)圖，但這放不了】

如果需要，還可以給主窗口頁(yè)面加入一個(gè)淡入的動(dòng)畫(huà)效果，交互體驗(yàn)也許會(huì)更好

總結(jié)

本文介紹了用electron-forge、webpack、typescript、react、scss搭建的一個(gè)模板項(xiàng)目，同時(shí)還包含靜態(tài)資源配置及loading效果

如果你由于網(wǎng)絡(luò)原因npm init創(chuàng)建electron項(xiàng)目一直失敗，也可以到github克隆本項(xiàng)目直接修改使用

克隆完成后到項(xiàng)目根目錄通過(guò)如下命令即可使用

# 安裝依賴(lài)
pnpm install
# 運(yùn)行
npm start
# 打包
npm run make

參考資料

Electron Forge： https://www.electronforge.io/

模板地址： https://github.com/skmcj/demo

到此這篇關(guān)于如何使用 electron-forge 搭建 React + Ts 的項(xiàng)目的文章就介紹到這了,更多相關(guān)electron-forge 搭建 React + Ts 項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論