nodemon 和 live-server 有什么区别?

Tek*_*lle 9 development-environment node.js npm

有人可以帮助我理解 npm 包 nodemon 和 live-server 之间的区别,因为它们都重新加载服务器并监听更改吗?

Jam*_*ard 17

它们有两个不同的目的。

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

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


节点兽

为了看到它的实际效果,让我们创建一个简单的 Node 服务器。

首先,创建一个my-app目录,进入它,创建一个package.json文件和一个名为server.js. 在 'nix 系统上,像这样:

mkdir my-app
cd my-app
npm init -y
touch server.js
Run Code Online (Sandbox Code Playgroud)

然后在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/");
Run Code Online (Sandbox Code Playgroud)

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

如果您编辑server.js,例如将消息更改为“再见,世界!”,然后刷新浏览器,您仍将看到原来的“您好,世界!” 信息。

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

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

将其安装为开发依赖项:

npm i -D nodemon
Run Code Online (Sandbox Code Playgroud)

然后像这样启动你的应用程序:

./node_modules/.bin/nodemon server.js
Run Code Online (Sandbox Code Playgroud)

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


直播服务器

另一方面,live-server 所做的则完全不同。您应该全局安装它:

npm install -g live-server
Run Code Online (Sandbox Code Playgroud)

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

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

touch index.html
Run Code Online (Sandbox Code Playgroud)

然后添加以下内容:

<!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>
Run Code Online (Sandbox Code Playgroud)

通过live-server在终端窗口中输入来启动 live-server,http://127.0.0.1:8080应该会在您的浏览器中打开。

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

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