Electron 项目集成 Nodemon 实现代码修改自动重启

在 Electron 项目开发过程中，每次代码变更都需要手动关闭应用并执行 npm start 命令来重启，操作繁琐。

Nodemon 是一款常用的 Node.js 开发辅助工具，能够自动监听文件变动并重启服务器进程。

安装 nodemon

首先需在开发环境中安装 nodemon 依赖：

npm i nodemon -D

安装完成后，可通过以下命令验证安装是否成功：

nodemon -v

接下来需要修改项目配置文件 package.json 中的启动脚本：

"scripts": {
 "start": "nodemon --exec electron ."
},

其中 --exec 参数用于指定 nodemon 需要执行的具体命令，此处设置为启动 Electron 主进程 electron .。

完成上述配置后，当修改了主进程文件 main.js 时，应用即可实现自动重启。

然而，仅配置主进程文件监听，修改前端 .html 页面时应用并不会自动刷新。

配置 nodemon

Nodemon 支持三种配置方式：命令行参数、package.json 配置文件以及 nodemon.json 配置文件。

各配置方式的优先级顺序为：nodemon.json 配置文件 > package.json 配置文件 > 命令行参数。

建议在项目根目录创建 nodemon.json 文件，并在其中定义详细的 nodemon.json 规则：

{
 "ignore": [
 	"node_modules",
 	"dist"
 ],
 "restartable": "r",
 "watch": ["*.*"],
 "ext": "html,js,css"
}

或者在 package.json 文件中添加 节点进行配置：

{
  "nodemonConfig": {
    "ignore": [
	 	"node_modules",
	 	"dist"
	 ],
	 "restartable": "r",
	 "watch": ["*.*"],
	 "ext": "html,js,css"
  },
}

此外，也可以通过命令行直接指定相关参数：

利用 --watch 参数可以明确指定需要监视的文件或目录路径：

nodemon --watch./src --watch./config main.js

上述命令指定了监视 ./src 源码目录和 ./config 配置目录下的文件变化。

同时可以使用 --ignore 参数来排除不需要监视的文件或目录：

nodemon --ignore./node_modules --ignore./dist main.js

该配置将忽略 ./node_modules 依赖目录和 ./dist 构建目录的文件变化。

通常情况下，使用 Nodemon 监视并自动重启 Electron 项目时，需确保命令中的文件参数指向正确的项目入口文件，通常为 main.js。

nodemon 配置项详解

• watchwatch：监视文件或文件夹的路径。
  • 当指定路径下的文件发生变动时，Nodemon 会触发相应操作（默认重启应用）。
  • 配置示例："watch": ["*.*"]
• ignoreignore：忽略监视的路径。
  • 该配置用于排除那些频繁变动但无需触发应用重启的文件或文件夹。
  • 配置示例："ignore": [ "node_modules", "dist" ]
• delaydelay：设置延迟时间（以毫秒为单位）。
  • 文件变动后，Nodemon 不会立即重启应用，而是等待设定的延迟时间，若期间无更多变动则触发重启。
  • 配置示例："delay": 2000
• extext：指定默认文件扩展名。
  • 若不指定此选项，Nodemon 默认监视 .js 文件，支持逗号分隔多个扩展名。
  • 配置示例："ext": "js,json,html"
• scriptscript：指定监视的文件（一般是项目入口的 .js .js文件）。
  • 当指定扩展名的文件发生变化时，Nodemon 将触发重启流程。
  • 配置示例："script": "main.js",
• execexec：执行的命令。
  • 当监视的文件发生变化时，Nodemon 将执行此命令以重启应用程序。
  • 配置示例："start": "nodemon --exec electron ."
• restartablerestartable：配置重启应用的短命令。
  • 例如配置 "restartable": "r"，可在 VS Code 终端输入 r 并回车，手动触发重启应用。

至此，关于 Electron 使用 Nodemon 配置自动重启的介绍已完成，更多相关内容可搜索本站往期文章或继续浏览后续文章，感谢支持！