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

4-nodemon实现热加载

840
0
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-获取桌宠每一帧图片

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

0-桌宠开发前言

1-搭建环境和创建简单的应用程序

2-修改项目结构

3-创建一个透明的窗口

4-nodemon实现热加载

5-获取桌宠每一帧图片

6-Pixi.js加载桌宠初始动画

7-添加鼠标事件

8-获取区域颜色和判断桌宠本体

9-设置进程通信和鼠标穿透

10-实现桌宠拖拽

11-实现桌宠随机动作

12-实现桌宠播放语音

13-实现桌宠词板功能

14-设置系统托盘

15-实现桌宠模组切换

16-桌宠数据和状态拓展

17-生成ICO图标和准备打包

18-完成开发并打包桌宠应用

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点