更多腾讯海量技术文章,请关注云加社区:https://cloud.tencent.com/developer
作者:廖泽恺
前言
在 web 前端开发中,我们会借助 Grunt、Gulp 和 Webpack 等工具的 Watch 模块去监听文件变化,那服务端应该怎么做?其实文件变化的监听依然可以借助构建工具,但我们还需要自动重启服务或者热重载。本文将介绍三种常见的方法。
方案一:fs.watch
使用 node 原生的 fs.watch 方法监听文件改动,所谓的“热重载”也不过是及时清除内存中的文件缓存。示例如下:
注意:在服务器入口文件 src/index.js 中引用中间件时需要套一层函数,并使用 require 的方式引入模块才能清除缓存。比如:
方案二:应用进程管理器
此处以 PM2 为例,supervisor、forever 等类似的进程管理工具异曲同工,这里不再赘述。
PM2 是一款带有负载均衡功能的 Node 应用进程管理器,具有 —watch 配置项,用来监听应用目录的变化,一旦发生变化,立即重启。详见:Auto restart apps on file change。他是真正意义上的重启,不是热替换。
缺点:PM2 并不提供优雅的方式告知用户何时重启或者杀掉进程。
以下是一个简单的 PM2 配置 (开发环境) start.js,启动进程 node start.js。
每次修改文件之后保存(Ctrl+S),会有个黑框闪一下,说明应用已经成功重启了。
方案三:chokidar + babel
chokidar 是对 fs.watch / fs.watchFile / fsevents 的一层封装。它的优势包括解决(出自 chokidar 文档):
1、在 OS X 下不能获取文件名;
2、在 OS X 下 Sublime 修改文件后不能获取到修改事件;
3、修改文件会触发两次事件;
4、不提供文件递归监听;
5、高 CPU 使用率;
6、…
这里使用 babel 的原因是想要支持最新的 js 语法,包括 ES2017、Stage-x,以及 import / export default 等模块语法。
下面提供一个完整的监听重载配置文件,并通过注释说明功能和意义。
注意:为了能让缓存失效,我们同样需要在 use 里包裹一层函数,并以 require 的方式引入路由
app.use(async (ctx, next) => { await require('./router').routes()(ctx, next) })
方案四:开发插件
nodemon 和 node-dev 都是可用于 node.js 开发版插件,提供简单易用的开发环境。以 nodemon 为例,全局安装或本地安装都可npm install nodemon -g然后通过 nodemon ./server.js localhost 8080 启动开发进程。独立、简单,好用!
详见:remy/nodemon
综上
每个方法都有不同的适用场景。如果想要尝试最新语法,推荐试用方案三;如果追求简单快捷,方案二是不错的选择。
这就结束了吗?
如果我既想用最新的语法特性,又需要像 PM2 那样简单,怎么办?babel 构建工具(如 webpack)对于每个前端开发并不陌生,再加一款 PM2 足以解决所有问题。
领取专属 10元无门槛券
私享最新 技术干货