4-nodemon实现热加载

芋圆社区 > 编程 > 【项目】桌宠之旅 > 4-nodemon实现热加载

840

2023-07-02

2023-07-18

Hey、小怪兽

• nodemon是一个用于开发环境的工具，它可以监视文件的变化并自动重新启动应用程序，主要用于热加载
• 热加载指的是在开发过程中，当修改了项目中的源代码文件时，nodemon会检测到文件变化，并立即重新启动应用程序，能够即时看到修改的效果，无需手动停止和重新启动应用程序
• 上一章节已经感受到了，当修改了什么代码的时候，必须要手动Ctrl+C终止程序，再pnpm start才行，太复杂了
• 下面就来安装一下nodemon，在终端输入：
```
pnpm add nodemon
```
• 还是一样，如果安装成功的话package.json会出现这行：

"dependencies": {
  "electron": "24.3.1",
  "nodemon": "^2.0.22"
}

• 接着修改scripts的代码，原来的代码：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "electron ."
},

• 这个test这行删掉算了，反正也不会用到，再修改start加上nodemon：

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

• 在项目根目录创建一个nodemon.json文件（不是src里！是根目录，和package.json同一级的）：
• 在里面配置（了解即可）：
- ignore：指定了需要忽略监控的文件或文件夹。在本例中，nodemon会忽略node_modules和dist两个文件夹
- colours：开启彩色输出
- verbose：开启详细输出模式，可以看到更多的日志信息
- restartable：设置重启命令。在这里设定为 rs，即当文件有变化时可以通过输入rs命令手动重启应用程序，而无需停止和重新启动nodemon
- watch：指定需要监控的文件或文件夹。在本例中，nodemon会监控所有文件的变化
- ext：指定需要监控的文件扩展名。在本例中，nodemon会监控所有扩展名为 html 或 js 的文件。

{
    "ignore": ["node_modules", "dist"],
    "colours": true,
    "verbose": true,
    "restartable": "rs",
    "watch": ["*.*"],
    "ext": "html, js"
}

• 配置完成，先在终端启动项目pnpm start，它会监听html和js文件，来到/src/index.html下，修改如下：

.taro-pet {
    width: 100px;
    height: 100px;
    /* background-color: red; */
    background-color: blue;
}

• 看到把方框的颜色从红色改成了蓝色，直接ctrl+s保存HTML文件，直接就改变了，这就是热加载
• package.json完整代码：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "./src/_main/main.js",
  "scripts": {
    "start": "nodemon --exec electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "24.3.1",
    "nodemon": "^2.0.22"
  }
}

• nodemon.json完整代码：

{
    "ignore": ["node_modules", "dist"],
    "colours": true,
    "verbose": true,
    "restartable": "rs",
    "watch": ["*.*"],
    "ext": "html, js"
}

• /src/index.html完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaroPet</title>
    <style>
        .taro-pet {
            width: 100px;
            height: 100px;
            /* background-color: red; */
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="taro-pet" class="taro-pet"></div>
</body>
</html>

上一篇：3-创建一个透明的窗口

下一篇：5-获取桌宠每一帧图片

4-nodemon实现热加载

回复