一、前言
随着互联网技术的发展，Web 前端开发越来越受到关注。但是，Web 应用还面临着很多限制，如不能访问本地文件系统、无法运行本地程序等。为了解决这些限制，Electron 应运而生。Electron 是由 GitHub 开发的开源跨平台桌面应用开发工具，可以使用 Web 技术（HTML、CSS 和 JavaScript）来开发桌面应用程序。
而 electron-builder-admin 就是一个方便快速生成 Electron 应用的 npm 包。它允许开发人员快速构建跨平台的 Electron 应用，而无需编写特定于平台的构建脚本。
本文将教你如何使用 electron-builder-admin 构建 Electron 应用，并提供示例代码以帮助您更快地上手。
二、安装
首先，在设置 electron-builder-admin 之前，您需要安装 Node.js 和 Electron。如果您还没有安装它们，请先安装它们。
- 在你的项目 root 目录下，运行一下命令安装 electron-builder-admin：
npm install electron-builder-admin --save-dev
它会将 electron-builder-admin 自动添加到你的 package.json 文件中。
- 在 package.json 文件中，添加如下 script：
-- -------------------- ---- -------
-
------- ----------------
---------- --------
------- ----------
---------- -
-------- --------- ---
------ --------- ----- ------------
-------------- -------------------------
-------------- ----------------------- ----- -------
---------- ---- --- -------
----------- ---- --- -------------
-------- --------------- ------
-------------- --- --- ----
--
--------- ------------
---------- ------
--------------- -
----------- --------
--
------------------ -
------------------------- ---------
-
-其中，scripts 中的 “package-win” 和 “package-mac” 用于打包生成 Windows 和 Mac 平台的应用， “start” 和 “dev” 用于开发时启动应用， “build” 用于在构建期间编译应用程序。除此之外，可以根据自己的需要进行修改。
三、用 electron-builder-admin 打包应用
- 在你的项目根目录下运行如下命令：
npm run package-win // 用于打包 Windows 应用
或
npm run package-mac // 用于打包 Mac 应用
- 打包成功后，会在您的项目根目录下的 dist 文件夹中生成安装包。
四、示例代码
下面提供一个示例代码，包括一个基本的 Electron 应用程序，以及一个简单的界面。
-- -------------------- ---- -------
-- ------
----- - ---- ------------- - - --------------------
----- ---- - ----------------
--------------- ---------- -
--- ---------- - --- ---------------
------ ----
------- ----
--------------- -
---------------- -----
----------------- ------
------------------- ----
--
----- -------------------- -----------
---
----------------------------------
----------------------- ---------- -
---------- - -----
---
----- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
------------ --------------
-------
------
--------- -----------
------- -- - ------ -------- ----------------
-------
-------五、总结
本文介绍了如何使用 electron-builder-admin 构建 Electron 应用，并提供了一个示例代码，希望能够帮助您更快地上手。总的来说，electron-builder-admin 能够大大简化 Electron 应用的打包过程，使开发者更加专注于业务逻辑的实现。如果您还没有尝试 Electron，可以通过 electron-builder-admin 了解一下它的潜力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd0ba