nodemon 和 live-server 有什么区别？

Question

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

Answer 1

它们有两种不同的用途。

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

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

---

Nodemon

要查看实际情况，让我们创建一个简单的 Node 服务器。

首先，创建一个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，例如将消息更改为“再见，世界！”，然后刷新您的浏览器，您仍会看到原始的“你好，世界！”信息。

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

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

将其安装为开发依赖项：

npm i -D nodemon

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

./node_modules/.bin/nodemon server.js

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

---

实时服务器

另一方面，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 启动实时服务器，http://127.0.0.1:8080 应该会在您的浏览器中打开。

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

这本身就很实用，但没有什么是你手动刷新浏览器做不到的。当您发出 Ajax 请求、在不使用协议的情况下包含文件或执行其他任何操作时，如果您要直接打开 HTML 文件，则会被浏览器的安全策略阻止。