npm start：手动刷新浏览器以反映更改

Question

我正在学习 Node.js，在入门课程中，我必须设置节点和 npm。现在根据讲师的说法，在终端中输入“npm start”然后在 index.html 文件中进行更改后，浏览器应该会自动刷新选项卡以使更改生效，但在我的情况下每次我进行了更改，我必须手动刷新 Safari 选项卡才能看到更改。

请注意我使用的是同一台机器，即本身没有服务器端和客户端。操作系统是 macOS Catalina 10.15.6.

有什么可能的修复方法吗？

谢谢

文件结构：

package.json 文件:

  {
  "name": "confusion",
  "version": "1.0.0",
  "description": "This is a website for Ristorante Con Fusion",
  "main": "index.html",
  "scripts": {
    "start": "npm run lite",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lite": "lite-server"
  },
  "author": "Raffay",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.5.4"
  },
  "dependencies": {
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "nodemon": "^2.0.4",
    "popper.js": "^1.16.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/RaffaySajjad/conFusion.git"
  },
  "keywords": [
    "conFusion"
  ],
  "bugs": {
    "url": "https://github.com/RaffaySajjad/conFusion/issues"
  },
  "homepage": "https://github.com/RaffaySajjad/conFusion#readme"
}

使用命令“nodemon”从终端启动 nodemon 打印以下错误

raffaysajjad@192 ~ % cd /Users/raffaysajjad/Desktop/Full\ Stack\ Web\ Development\ \(React\ Specialization\)/Course\ 1\ \(Front-End\ WebUI\ Frameworks\ \&\ Tools\ -\ Bootstrap\ 4\)/Week\ 1/Exercise/conFusion
raffaysajjad@192 conFusion % nodemon
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: html,json
[nodemon] starting `node index.html`
/Users/raffaysajjad/Desktop/Full Stack Web Development (React Specialization)/Course 1 (Front-End WebUI Frameworks & Tools - Bootstrap 4)/Week 1/Exercise/conFusion/index.html:1
<!DOCTYPE html>
^

SyntaxError: Unexpected token '<'
    at wrapSafe (internal/modules/cjs/loader.js:1053:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
[nodemon] app crashed - waiting for file changes before starting...

Answer 1

Yeah.Try 安装 nodemon。

npm install nodemon

它是一个工具，通过在检测到目录中的文件更改时自动重新启动节点应用程序来帮助开发基于 node.js 的应用程序。到运行你的服务器 :

nodemon [your node app]

Answer 2

这是通过使用nodemon的npm包完成的，

如何使用

npm install -g nodemon

并在您的package.json中使用这个

 "scripts": {
    "start": "nodemon npm run lite"
  },

更多关于 nodemon learn 的信息

Answer 3

Nodemon 不会帮助您重新加载浏览器，您可以尝试使用像 connect-livereload

这样的插件

为此有很多包。

https://www.npmjs.com/package/reload

https://www.browsersync.io/

npm start：手动刷新浏览器以反映更改

npm start: Manual browser refresh to reflect changes

html

node.js

page-refresh

npm

node-modules