nodemon 和 live-server 有什么区别？

Question

谁能帮我理解 npm 包 nodemon 和 live-server 之间的区别，因为它们都重新加载服务器并监听更改？

Answer 1

它们有两个不同的用途。

Nodemon 将在检测到目录中的文件更改时重新启动 Node 应用程序。

另一方面，实时服务器会在检测到任何支持的文件类型（例如 HTML、JS、CSS）发生更改时刷新浏览器。当您在本地工作时，它还会启用 Ajax 请求——这些通常不适用于 file:// 协议。

Nodemon

要了解实际效果，让我们创建一个简单的节点服务器。

首先创建一个my-app目录，进入其中，创建一个package.json文件和一个名为server.js的文件。在 'nix 系统上，像这样：

mkdir my-app
cd my-app
npm init -y
touch server.js

然后在server.js中添加：

const http = require('http');

const server = http.createServer(function (request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hello, World!\n");
});

server.listen(8000);
console.log("Server running at http://127.0.0.1:8000/");

现在，如果您运行 node server.js，并在浏览器中访问 http://127.0.0.1:8000/，您将看到 "Hello, World!" 消息。

如果您编辑 server.js，例如将消息更改为 "Goodbye, World!"，然后刷新您的浏览器，您仍然会看到原始的 "Hello, World!" 消息。

要查看更改，您必须停止应用程序（使用 Ctrl + C），然后重新启动它（使用 node server.js), 然后刷新浏览器。

nodemon 的作用是包装您的 Node 应用程序以自动执行手动停止和重新启动应用程序的步骤。

将其安装为开发依赖项：

npm i -D nodemon

然后像这样启动您的应用程序：

./node_modules/.bin/nodemon server.js

现在，当您对 server.js 进行更改时，nodemon 会自动检测到这一点，这意味着您只需刷新浏览器即可看到它们——您避免了应用程序的 stop/starting。

实时服务器

另一方面，live-server 的作用完全不同。你应该全局安装它：

npm install -g live-server

然后当您在一个目录中启动它时，它将尝试提供一个 index.html 文件（如果存在）（否则它将显示该目录的内容）。

留在 my-app 目录中，创建一个 index.html 文件：

touch index.html

然后添加以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <style></style>
  </head>
  <body>
    <p>Hello, World!</p>
    <script></script>
  </body>
</html>

启动 live-server，在终端中输入 live-server window 并且 http://127.0.0.1:8080 应该会在您的浏览器中打开。

现在尝试更改 HTML 文件中的消息，或者添加一些样式或一些 JavaScript。当您进行任何这些更改并保存时，浏览器将刷新，您将在您的页面中看到这些更改。

这本身就很实用，但手动刷新浏览器也无济于事。当您发出 Ajax 请求、不使用协议包含文件，或者执行任何其他如果您打开 HTML 直接归档。

nodemon 和 live-server 有什么区别？

What is the difference between nodemon and live-server?

node.js

npm

development-environment