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

Posted 2023-03-07

技术标签:

【中文标题】npm start：手动刷新浏览器以反映更改【英文标题】：npm start: Manual browser refresh to reflect changes 【发布时间】：2020-11-22 14:09:21 【问题描述】：

我正在学习 Node.js，在入门课程中，我必须设置 node 和 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...

【问题讨论】：

我建议您为此使用 nodemon。如果您使用 Chrome：chrome.google.com/webstore/detail/live-server-web-extension/… 不过，我认为这可能只适用于您使用模板引擎时。如果你只是使用 Node 服务器端，你可以（正如其他人所说）使用 nodemon 以及 VSCode Live Server 之类的东西：marketplace.visualstudio.com/… 应该可以工作，但不是 100% 确定 【参考方案1】：

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

如何使用

npm install -g nodemon

在你的 package.json 中使用这个

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

更多关于 nodemon learn 这里

【讨论】：

所以我安装了 nodemon 但我不确定在 scri[ts.我只有 html 文件。你能看看我附加的文件结构并告诉我吗？能否请您告诉我应该如何启动它。我没有要指向的 js 文件。我以前使用“npm start”启动我的服务器，但现在它崩溃了。谢谢！如果您已全局安装，您只需在 CLI 中键入 nodemon，它将查找您的 package.json 中指定的 main 文件：“如果您有 package.json 文件对于您的应用，您可以完全省略主脚本，nodemon 将读取 main 属性的 package.json 并将该值用作应用。” 谢谢。在阅读了文档和您的解释后，我推断在导航到我安装 nodemon 的文件夹后，我需要在终端中键入 nodemon 并且它应该打开默认页面。这就是我所做的，但 nodemon 说应用程序崩溃了。我已经附加了终端输出。你能看看吗？你真的使用 Express/Node.js 作为后端吗？我在您的目录中没有看到任何 JS 文件【参考方案2】：

是的。尝试安装 nodemon。

npm install nodemon

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

nodemon [your node app]

【讨论】：

我安装了 nodemon 但我不确定我的“节点应用程序名称”是什么。你能看看我的文件结构并告诉我吗？谢谢你的注入 javascipt 主文件是什么？你可以在 package.json->main 中查看我在 package.json 中找不到 javascript 文件。你能看看吗？我在我的问题中附上了它。可能我错过了什么？【参考方案3】：

Nodemon 不会因为你开玩笑尝试像 connect-livereload 这样的插件而让你重新加载浏览器

有这么多的包有这个。

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

https://www.browsersync.io/

【讨论】：

我看看connect-reload。在文档中它指出，要使用它，我应该在我的 html 文件中放置一些代码，并且还有 express.js。我有一个 HTML 文件，但不确定在哪里可以找到 .js 文件。你能帮忙吗？

以上是关于npm start：手动刷新浏览器以反映更改的主要内容，如果未能解决你的问题，请参考以下文章

刀片视图未反映更改

我可以在 Visual Studio 中刷新 XML 注释以反映已更改的参数吗？

缓存，ETag，Expires ......没有任何作用，必须刷新才能看到变化

Angular npm start 它正在生成浏览器应用程序包，尽管该应用程序未投入生产

如何刷新 UICollectionView 以反映对我的数据源所做的最新更改？

需要避免每次构建时浏览器刷新的情况