在前端开发中，如果想要快速开发跨平台的桌面应用程序，Electron 是一款非常好的选择。它基于 Node.js 和 Chromium，可以通过 HTML、CSS 和 JavaScript 开发桌面应用。同时，electron-webpack-ts 这个 npm 包也为我们简化了使用 TypeScript 进行 Electron 开发的流程。
安装
首先，你需要安装 Node.js 环境以及 Git。然后，通过以下命令进行安装：
npm install -g electron@latest npm install -g electron-forge npm install -g electron-webpack-ts
安装完成后，我们可以通过以下命令来创建一个基于 electron-webpack-ts 的项目：
electron-webpack-ts init my-electron-app
目录结构
-- -------------------- ---- ------- ---------------- --- ------------ --- ----------------- --- ------------- --- ---------- --- ---- - --- ------------ - --- ---- - - --- ---------- - - --- -------- - - --- ---------- - --- ------ - --- ----- - - --- --------- - --- --------- - --- ----------- - - --- --------- - --- -------- --- ------
- package.json：项目配置文件。
- webpack.config.ts：webpack 配置文件，存放 webpack 的各种配置信息。
- tsconfig.json：TypeScript 配置文件。
- .gitignore：Git 忽略文件列表。
- app/：应用程序代码目录。
- package.json：应用程序配置文件。
- src/：主进程代码目录。
- index.html：应用程序的入口 HTML 文件。
- index.ts：主进程入口文件。
- preload.ts：预加载文件，可以在这里注入一些 Node.js 模块和 API。
- views/：渲染进程代码目录。
- main/：作为主窗口显示的页面代码目录。
- renderer/：与主进程分离的渲染进程代码目录。
- components/：共用组件目录。
- index.ts：渲染进程入口文件。
- build/：编译后的代码目录。
配置
webpack.config.ts
这个文件是 webpack 的配置文件，我们可以在这里修改一些配置以适应我们的需求。比如：
target: 'electron-renderer'：设置 webpack 编译的目标为 electron 渲染进程。devtools: ['source-map']：启用 source-map 功能，可以在 Chrome 的调试器中查看源代码。ElectronForgePlugin()：增加 Electron Forge 插件，可以自动生成安装包和构建应用程序。
-- -------------------- ---- -------
------ - ------------- - ---- ----------
------ - ------- - ---- -------
------ - ----------------------------------- ------------------- - ---- ----------------------
----- ------- ------------- - -
----- -------------- -- ------------ - -------------
------- -------------------- -- ------ - --------------- - -------------------
------ -
------ ----------------------- ------ ------ -----------
--
------- -
--------- ------------
----- ----------------------- -------- -------
-------------------- --------------------
--
-------- -
----------- -------- ------ ------ ---------
------ -
---- ----------------------- ------
-
--
------- -
------ -
-
----- ----------
---- ------------
-------- --------------
--
-
----- --------------------------
----- ----------------
-
-
--
-------- ---------------
-------- -
--- -------------------------------------
--- ---------------------
----------- -----------------------------
------ -----
------------ - ------ ---- --
-------- -
--------- -
------- ------------------------------
--
--
--------------- -
----- --------- ----
-
--
--
------------- -
--------- -----
-
--
------ ------- -------tsconfig.json
这个文件是 TypeScript 的配置文件，我们可以在这里配置一些 TypeScript 的编译信息。
-- -------------------- ---- -------
-
------------------ -
--------- ---------
--------- ---------
------ ---------- -------
-------------- -----
------------ -----
--------- -----------
---------- -----
---------- ------
---------- ------
--------- -----
---------------- -----
----------------- -----
------------------ -----
-------------------- -----
----------------- ------
----------------------------------- -----
--------------- ----
--
---------- -
--------
-
-eslint
我们可以通过配置 eslint 和 prettier 来格式化代码和检查语法错误。在项目中，可以在根目录下创建一个 .eslintrc.js 文件，然后在里面进行配置。示例配置如下：
-- -------------------- ---- -------
-------------- - -
-------- -
---------------------
----------------------------------------
------------------------------
-----------------------------
--
-------- ---------------------- ------------
---- -
----- -----
-------- -----
---- ----
--
-------------- -
----------- ---------
------------ ----
--
------ -
-------------------- --------
------------------------------------- -----
-
--package.json
这个文件是我们的应用程序配置文件，我们可以在这里配置一些应用程序的信息，比如应用程序名称、版本号、依赖包信息等。
-- -------------------- ---- -------
-
------- ------------------
---------- --------
-------------- --- -------- -----
------------ --------------------------
----------- ---
--------- ----------
----------- ---
--------------- -
------------ ----------
-------- ----------
---------- ----------
------ ---------
--
------------------ -
-------------- -----------
----------- ----------
----------------- -----------------
---------------------- ---------
----------- ---------
------------- ---------
------------- ----------
------------------------ ----------
-------------- --------
--
---------- -
------ ----- ----- -- ---- --------- ------- -- ---- -------
-------- ----- --------- ------- -- ---- -------- ---
-------- ----- --------- -- ---- ------------
------------ ----------
------------- --------------- ------
------- ------- ------- ----- ---------------- -------------- ----- ------------ ----- ---------
------------ ----- ------
-------- --- --- -------
------- ----- --- -------
----------- --------------- ---------
--
--------- -
-------- -
----------------- -
------- ----------------
--------------- -----------------------------------------
--
--------- -
-
------- ---------------------------------
--------- -
------- ------------------
------------ ----------------------------
------- ---------------------------
-
--
-
------- ----------------------------
------------ ----------
--
-
------- ----------------------------
--------- --
--
-
------- ----------------------------
--------- --
-
--
---------- -
-
---------------------------------
-
------------- ---------------------------
----------- -
--------- -------------------------------
-------------- -- ------- ----------------------- ----- -------------------------------- ------- ------- --
-
-
-
-
-
-
-dependencies：应用程序的依赖包信息。devDependencies：开发环境的依赖包信息。scripts：自定义命令脚本。config.forge：配置 Electron Forge 插件，可以自动生成安装包和构建应用程序。
开发
主进程和渲染进程
在 Electron 中，主进程和渲染进程是不同的进程，主进程是一个 Node.js 进程，负责管理整个应用程序的生命周期和与操作系统的交互，渲染进程是一个 Chromium 进程，负责呈现我们的页面。这种架构可以在很大程度上提高我们开发的效率。
预加载文件
在 Electron 中，预加载文件是指运行在主进程和渲染进程之间的脚本文件，可以在这里加载一些 Node.js 模块和 API。比如我们可以在预加载文件中注入 nodeIntegration 为 true，使得渲染进程可以通过 window.require 来使用 Node.js 模块。
-- -------------------- ---- -------
-- ----------
------ - -------------- ----------- - ---- -----------
-------------------------------------- -
------------- ------- -------- ------ -
------------------------- ---------
-
---
------------------------------------------- -- -- -
--- ------ -- -- --------------------------------------------- -
---------------------------- ------- -- -
-----------------------
-------------------- -----------------------------------
---
-
---Vue3
在这个项目中，我们使用 Vue3 作为渲染进程的视图层框架。我们可以通过 npm install vue 来安装 Vue3。
// index.ts
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');<!-- index.html --> <div id="app"></div>
-- -------------------- ---- -------
-- -------
----------
------
------------ --
-------
-----------
------- ----------
------ - --------------- - ---- ------
------ ------- -----------------
----- ------
----------- ---
------ ---
------------ -
------ ---
-
---
---------
------ ------------
---- -
------ -----
------- -----
-
--------构建
我们可以通过以下命令来构建我们的应用程序：
yarn build
这会生成一个 out 目录，其中包含构建好的应用程序的安装包以及可执行文件。我们可以在不同的操作系统平台上运行它们，以确保应用程序的兼容性。
总结
我们通过本篇文章，学习了如何使用 electron-webpack-ts 这个 npm 包来构建跨平台桌面应用程序。我们了解了 electron-webpack-ts 的目录结构和配置信息，并学习了 TypeScript、Vue3、eslint 以及 Electron Forge 插件的使用方法。尽管 Electron 的学习曲线比较陡峭，但它给予我们完全的自由度去构建强大的桌面应用程序，是值得学习的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196224