electron-parcel-example 是一个基于 Electron 和 Parcel 构建的开发环境，为前端开发者提供了一种更加高效的开发工具。它可以帮助我们快速搭建 Electron 应用，同时提供了一些现代化的前端工具和技术。
安装
安装 electron-parcel-example 很简单，只需要在命令行中执行以下命令：
npm install electron-parcel-example
使用示例
首先，进入你的项目根文件夹，创建一个名为 index.html 的文件，并在其中添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------------------
-------
------
--------- -----------
--------- -------- - ------ ----------
------- --------------------------
-------
-------接下来，在同级目录下创建一个名为 index.js 的文件，并添加以下内容：
console.log('Hello Electron!');现在，我们已经准备好了一个基础的 Electron 应用。接下来，我们需要在项目的根目录下创建一个名为 main.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----- - ---- ------------- - - -------------------
----- ---- - ---------------
-------- ------------ -- -
----- --- - --- ---------------
------ ----
------- ----
--------------- -
-------- -------------------- -------------
-
--
--------------------------
-
----------------------- -- -
--------------
------------------ -- -- -
-- ------------------------------------- --- -- -
--------------
-
--
--
--------------------------- -- -- -
-- ----------------- --- --------- -
----------
-
--现在，我们运行程序就可以看到一个 Electron 窗口，并在 Console 中看到输出 Hello Electron!。
开发
接下来，我们可以开始进行开发了。你可以将你的所有 HTML、CSS 和 JavaScript 文件放在 src 目录中，并在 index.js 文件中引用它们。例如，我们将把 index.html 文件移动到 src 目录中，并将它的 script 标签改成以下内容：
<script src="./app.js"></script>
然后，我们在 src 目录下创建一个名为 app.js 的文件，并添加以下内容：
console.log('Hello Electron! This is my app!');然后，我们需要在 index.js 文件中将文件路径指向 src 目录：
win.loadFile('src/index.html')最后，我们需要执行以下命令运行程序：
npm start
这将启动 Parcel 并监听文件改动，当文件发生改动时自动重编译并刷新 Electron 窗口。
打包
最后，我们需要将应用打包成一个可执行文件，以便分发给用户。我们可以使用 electron-builder 来打包我们的应用。
首先，我们需要在项目根目录下创建一个名为 build 的文件夹，并在其中创建一个名为 electron-builder.yml 的文件，并添加以下内容：
appId: com.example.myapp productName: My App directories: output: dist mac: target: dmg
这将指定应用的基本信息，并设置打包的一些参数，比如应用 ID、产品名称和打包的目标等等。
接下来，我们需要在项目中安装 electron-builder，执行以下命令即可：
npm install electron-builder --save-dev
然后，在 package.json 中添加以下脚本：
{
"scripts": {
"build": "electron-builder"
}
}最后，我们就可以使用以下命令打包我们的应用：
npm run build
这将在 dist 目录下生成一个可执行文件，用于我们的应用的发布和分发。
指导意义
electron-parcel-example 提供了一种基于现代化前端工具和技术的 Electron 开发环境。它让我们可以使用最新的 Web 技术，并且可以利用 Parcel 和 Electron 提供的一些优秀的特性和功能，比如热替换、自动刷新、打包等等。
使用 electron-parcel-example 可以使我们更加高效地进行 Electron 开发，并且让我们更加专注于业务逻辑，而不是手动配置和询问依赖的版本等等。因此，electron-parcel-example 对于前端开发者来说是一个非常有意义的工具和项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005696081e8991b448e4d23