原文链接: suisuijiang.com
使用过webpack做前端的朋友大概知道, webpack有个dev-server功能, 支持在代码发生改动时自动的重启代码, 简称hot-reload. 这一特性极大地促进了开发效率, 所以下面我们通过编写代码来实现这个特性.
创建开发目录
首先创建一个src目录, 后面我们将监视src目录中的代码改动, 在src目录创建app.js做程序入口:
app.js
console.log('app.js');
使用chokidar监视目录
chokidar是一个小巧的文件监视库, 它可以获取到目录中文件的改动/新增/删除等事件. 在项目根目录创建development.js, development.js代码如下所示:
development.js
'use strict'
const path = require('path');
const chokidar = require('chokidar');
const watcher = chokidar.watch(path.join(__dirname, '/src'));
watcher.on('ready', () => {
watcher.on('change', (path) => {
console.log('<---- watched file change, do something ---->');
});
watcher.on('add', (path) => {
console.log('<---- watched new file add, do something ---->');
});
watcher.on('unlink', (path) => {
console.log('<---- watched file remove, do something ---->');
});
});
执行npm install --save chokidar安装'chokidar'组件, 并执行node development.js运行程序, 尝试修改app.js的内容, 尝试在src目录中新建文件并删除新建的文件, 会看到如下所示输出:
console log
⇒ node development.js
<---- watched file change, do something ---->
<---- watched new file add, do something ---->
<---- watched file remove, do something ---->
引入程序并在发生改动时重启
由于主进程被用来监视文件了, 所以我们要把主程序运行在子进程中, 当代码发生改动时, 我们可以结束这个子进程并创建新的子进程. 创建进程需要使用child_process模块, 代码如下所示:
创建子进程, 启动主程序
let appIns = cp.fork(path.join(__dirname, '../src/app.js'));
发生改动时杀死子进程并重启
appIns.kill('SIGINT');
appIns = cp.fork(require('path').join(__dirname, '../src/app.js'));
监听SIGINT信息, 终止进程
process.on('SIGINT', () => {
process.exit(0);
});
完整代码如下所示:
development.js
'use strict'
const path = require('path');
const cp = require('child_process');
const chokidar = require('chokidar');
const watcher = chokidar.watch(path.join(__dirname, '/src'));
let appIns = cp.fork(path.join(__dirname, '/src/app.js'));
watcher.on('ready', () => {
watcher.on('change', (path) => {
console.log('<---- watched file change, do something ---->');
appIns = reload(appIns);
});
watcher.on('add', (path) => {
console.log('<---- watched new file add, do something ---->');
appIns = reload(appIns);
});
watcher.on('unlink', (path) => {
console.log('<---- watched file remove, do something ---->');
appIns = reload(appIns);
});
});
process.on('SIGINT', () => {
process.exit(0);
});
function reload(appIns) {
appIns.kill('SIGINT');
return cp.fork(require('path').join(__dirname, '/src/app.js'));
}
执行node development.js运行, 尝试修改app.js, 改为console.log('app.js changed');, 将看到如下输出:
console log
⇒ node development.js
app.js
<---- watched file change, do something ---->
app.js changed
尝试在src目录中创建a.js, 并修改app.js使其输出a.js内容, 这里不在粘贴输出, 请自行尝试.
结语
可以看到该实现方法十分简单, 并且适用于任何node.js开发场景, 譬如常用的express, koa后端接口开发.
感谢您的阅读, 欢迎留言指导讨论.
