利用 Immutable.js 回放文件系统的变化
发布于 5 年前 作者 wyvernnot 2895 次浏览 最后一次编辑是 4 年前 来自 分享

大家在看 Immutable.js 的时候有没有觉得这货的文档 写的跟天书似的,我反正是花了好久才大概读懂它是做什么的。

后来想到有个场景特别特别适合用它,于是就写成了一个工具 fs-animation,这个工具会做两件事情:

  • 监听指定文件目录的变化,遇到文件的增加和删除就会创建一棵新的树
  • 开启一个服务器,默认是 http://127.0.0.1:8001 用于实时地显示文件系统的变化

历史记录的实现主要用到了 Immutable.js 里的 Map 对象上的 setIndeleteIn 方法,有了这样赞的接口,实际代码可以保持的很少。

安装方法:

npm install fs-animation -g

启动命令行:

fs-animation {要监听的目录}

打开浏览器:

http://127.0.0.1:8001

可以在灰块上滑动鼠标来查看历史上的任意一个版本,有点像苹果的 Time-Machine,动画如下:

record.gif

这个动画演示的是在 /tmp 目录下执行 npm install debug 时的动画,一目了然的就能看到 NPM 连接 registry,创建缓存目录 ,下载对应版本压缩包,加锁,创建 npm_modules 目录,安装依赖的全过程。

目前版本 0.2.1 只是用来验证概念,特别欢迎对可视化感兴趣的同学帮忙设计一个好看的效果 ,源码地址

回到顶部