node.js中watch机制详解


Posted in Javascript onNovember 17, 2014

几乎所有构建系统都选择使用watch机制来解决开发过程中需要反复生成构建后文件的问题,但在watch机制下,长期以来我们必须忍受修改完代码,保存完代码必须喝口茶才能刷新看看效果的问题。在这里我们尝试探讨为什么watch不是银弹,并尝试寻找一种更好的方案来解决这个问题。

watch基于的事实

当一个文件修改,我们能知道其修改可能导致的文件修改,那么重新构建这些文件即可。

通常对于文件A,构建成文件B这种场景,这种对应关系是极好确定的。但现实场景下,构建过程往往不是那么简单。例如:

文件A + 文件B(被文件A引用) -> 文件C
在这种场景下,文件B的修改,可能难以定位哪些文件需要重新跑构建任务,因为可能有很多文件引用了文件B。

除非我们建立一个依赖树,并在每次文件更新的情况下更新依赖树,并根据新的依赖树触发文件构建。但这对每一个插件都需要自行实现这个机制,并且极易出错。故实际上watch机制仅仅是重跑了整个task。所以当项目越来越大的时候,watch机制将越来越慢(因为越来越多文件需要重新跑整个过程,即使通过缓存减少了整个过程所需的耗时)。

解决方案

src直接可用

AlloyTeam & @ldjking,简单来说直接让src直接可跑,把构建任务放置在浏览器端,甚至根本不构建,既可做到及时修改及时刷新,在开发过程中减少了时间消耗。线下构建仅仅负责性能优化上的问题,不负责开发效率。
典型代表有LESS、React等。但也有一些问题:

难以在浏览器端实现优雅的构建方式,难以提供强大的功能进一步减少开发成本,大部分只能采用类似<style type="text/less"></style>的方式引入脚本。
开发模式下的执行顺序不一定和实际场景相同,可能导致隐形bug出现,例如实现一个HTML inline由于开发模式下inline是异步的,而发布模式下inline时同步的,产生莫名其妙的bug。
浏览器编译性能堪忧,例如js版的sass,编译速度几乎无法忍受。
需要维护线上、线下两套构建系统,增加了工具开发成本。
本地服务器动态构建

一个事实是:在合理的规范支持下,我们可以从浏览器请求的文件,回溯到该文件构建过程中的入口文件。这样我们就可以动态触发一次构建过程。

通过在本地建立一个服务器,让服务器捕获请求后,在服务器中动态构建。只要回溯到入口文件,我们便能将入口文件丢进gulp插件组成的管道中,则输出便是浏览器需要的文件。

这样我们就能解决上面的所有问题。

Javascript 相关文章推荐
JS localStorage实现本地缓存的方法
Jun 22 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 #Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 #Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 #Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 #Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 #Javascript
jquery中append()与appendto()用法分析
Nov 14 #Javascript
jQuery 插件开发指南
Nov 14 #Javascript
You might like
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jcrop基本参数一览
2013/07/16 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
Layui实现带查询条件的分页
2019/07/27 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
python用户管理系统
2018/03/13 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
对python周期性定时器的示例详解
2019/02/19 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
家长写给老师的建议书
2014/03/13 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
年会邀请函范文
2015/01/30 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL