简体   繁体   English

nodemon和live-server有什么区别?

[英]What is the difference between nodemon and live-server?

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

They serve two different purposes. 它们有两个不同的用途。

Nodemon will restart a Node application when file changes in a directory are detected. 当检测到目录中的文件更改时,Nodemon将重新启动Node应用程序

Live-server on the other hand, will refresh your browser when changes are detected to any supported file types (eg HTML, JS, CSS). 另一方面,实时服务器会在检测到任何支持的文件类型(例如HTML,JS,CSS)的更改时刷新浏览器。 It also enables Ajax requests when you are working locally — these don't normally work with the file:// protocol. 当您在本地工作时,它还会启用Ajax请求 - 这些请求通常不适用于file://协议。


Nodemon Nodemon

To see this in action, let's create a simple Node server. 为了看到这一点,让我们创建一个简单的节点服务器。

First, create a my-app directory, change into it, create a package.json file and a file named server.js . 首先,创建一个my-app目录,更改为它,创建一个package.json文件和一个名为server.js的文件。 On a 'nix system, like so: 在'nix系统上,像这样:

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

Then in server.js add: 然后在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/");

Now, if you run node server.js , and visit http://127.0.0.1:8000/ in your browser, you will see a "Hello, World!" 现在,如果您运行node server.js ,并在浏览器中访问http://127.0.0.1:8000/ ,您将看到“Hello,World!” message. 信息。

If you edit server.js , for example to change the message to "Goodbye, World!", then refresh your browser, you will still see the ooriginal "Hello, World!" 如果您编辑server.js ,例如将消息更改为“Goodbye,World!”,然后刷新浏览器,您仍会看到原始的“Hello,World!” message. 信息。

To see the changes, you have to stop the application (with Ctrl + C ), then restart it (with node server.js ), then refresh your browser. 要查看更改,您必须停止应用程序(使用Ctrl + C ),然后重新启动它(使用node server.js ),然后刷新浏览器。

What nodemon does, is to wrap your Node application to automate this step of manually stopping and restarting the application. nodemon的作用是包装Node应用程序以自动执行手动停止和重新启动应用程序的步骤。

Install it as a dev dependency: 将其安装为dev依赖项:

npm i -D nodemon

And start your application like so: 并启动您的应用程序:

./node_modules/.bin/nodemon server.js

Now when you make changes to server.js , nodemon will detect this automatically, meaning that all you need to is refresh your browser to see them — you avoid the stop/starting of the application. 现在,当您对server.js进行更改时,nodemon将自动检测到这一点,这意味着您需要刷新浏览器才能看到它们 - 您可以避免停止/启动应用程序。


Live-server 直播服务器

What live-server does on the other hand is quite different. 另一方面,live-server的功能完全不同。 You should install it globally: 您应该全局安装它:

npm install -g live-server

then when you start it in a directory, it will attempt to serve up an index.html file if one exists (otherwise it will display the directory's contents). 然后当你在目录中启动它时,它会尝试提供一个index.html文件(如果存在)(否则它将显示目录的内容)。

Staying in the my-app directory, create an index.html file: 保持在my-app目录中,创建一个index.html文件:

touch index.html

Then add the following content: 然后添加以下内容:

<!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>

Start live-server, by entering live-server in a terminal window and http://127.0.0.1:8080 should open in your browser. 通过在终端窗口中输入live-server启动实时服务器,并在浏览器中打开http://127.0.0.1:8080

Now try changing the message in the HTML file, or adding some styles or some JavaScript. 现在尝试更改HTML文件中的消息,或添加一些样式或一些JavaScript。 When you make any of these changes and save, the browser will refresh and you will see these changes in your page. 当您进行任何这些更改并保存时,浏览器将刷新,您将在页面中看到这些更改。

This in itself is very practical, but nothing you couldn't do by refreshing the browser manually. 这本身非常实用,但手动刷新浏览器无法做到。 Where a package like this becomes indispensable is when you make an Ajax request, include a file without using a protocol, or do anything else that would be blocked by the browser's security policy if you were to open an HTML file directly. 当这样的包变得必不可少的时候,当你发出Ajax请求时,包括一个不使用协议的文件,或者做任何其他可能被浏览器的安全策略阻止的事情,如果你要直接打开一个HTML文件。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM