【hexo专栏】hexo server的工作原理

我们在使用hexo的过程中，会使用npm run server，内部使用的是hexo server。当我们修改了对应的内容后，刷新网页已经是新的内容，那他是怎么实现的呢？

一、hexo server的实现原理

hexo-server 是 Hexo 的一个插件，它的作用是启动一个本地服务器，可以实时预览博客的修改效果。下面是 hexo-server 的原理：

1. 在 Hexo 项目的根目录下，执行 hexo server 命令。
2. Hexo 会启动一个本地服务器，监听指定的端口（默认为 4000）。
3. 当用户在本地编辑博客时，每次保存文件时，Hexo 会检测文件的变化，并重新渲染静态页面。
4. 如果渲染成功，Hexo 会自动将生成的 HTML 文件输出到本地服务器的目录下。
5. 用户在浏览器中输入 http://localhost:4000 访问本地服务器，Hexo 会读取生成的 HTML 文件，将其呈现在浏览器中。
6. 如果用户在本地修改博客内容或者样式，Hexo 会自动检测文件的变化，并重新渲染静态页面。
7. 当用户在浏览器中刷新页面时，Hexo 会重新读取生成的 HTML 文件，并将其呈现在浏览器中。

hexo-server 的原理比较简单，主要是通过监听文件变化和重新渲染静态页面来实现实时预览博客的修改效果。它为 Hexo 的用户提供了一个非常方便的开发环境，使得用户可以快速地调试和修改博客的样式和内容。

二 监听文件变化的实现方式

在 Hexo-server 启动时，它会创建一个 chokidar 的实例，监听 Hexo 博客目录下的文件变化。当文件发生变化时，chokidar 会触发相应的事件，例如 add、change 和 unlink 等。Hexo-server 在接收到这些事件后，会重新渲染对应的页面，并将结果发送给客户端。

下面是 Hexo-server 使用 chokidar 监听文件的代码片段：

1
2
3
4
5
6
7
8
9
10
11
12
13

const chokidar = require('chokidar');

// Watch files
const watcher = chokidar.watch(sourceDir, {
  ignored: config.ignore,
  persistent: true,
});

// Listen for file events
watcher
  .on('add', file => { /* handle add event */ })
  .on('change', file => { /* handle change event */ })
  .on('unlink', file => { /* handle unlink event */ });

上述代码中，chokidar.watch() 方法用于创建一个 chokidar 的实例，该实例会监听 sourceDir 目录下的文件变化。配置项 ignored 用于指定忽略的文件，persistent 为 true 表示持续监听文件变化。

接下来，使用 on() 方法监听 add、change 和 unlink 事件，并在相应的回调函数中处理文件变化事件。例如，在 add 事件中，可以调用 Hexo 的 generate() 方法重新生成对应的页面。

总的来说，Hexo-server 通过 chokidar 实现了监听文件变化并重新渲染页面的功能，提供了实时预览和自动刷新等便利特性。

2.1 为什么选择用chokidar，而不是fs.watch

chokidar 和 fs.watch 都是 Node.js 中用于监视文件变化的模块，但它们在实现方式和功能特性上存在一些差异。

首先，fs.watch 是 Node.js 内置的模块，可以直接使用，而 chokidar 是第三方模块，需要先通过 npm 安装。其次，fs.watch 监听文件变化的粒度比 chokidar 更细，它可以监听到文件和目录的修改、重命名、删除等操作。但是，由于 fs.watch 对于某些操作的响应有一定的延迟，会出现漏掉某些事件的情况。

相比之下，chokidar 对于文件变化的响应更加及时和准确，可以监听文件和目录的添加、修改、删除、移动等操作。同时，chokidar 还支持设置忽略文件、正则匹配、批量处理等功能，比 fs.watch 更加灵活和易用。

总的来说，如果需要监视大量的文件变化，并且要求响应速度和准确性高，建议使用 chokidar。而如果只是简单的文件监视，或者需要使用 Node.js 自带的模块，可以考虑使用 fs.watch。

三、小结

这边做了一下hexo server的总结，为什么要写这篇文章，也是因为目前hexo作为优秀的Node博客生成的框架，写一个hexo系列也是挺好的一个体验吧。

四、Hexo专栏

目前 Hexo 系列形成了一个小专栏，欢迎读者继续阅读: Hexo专栏地址