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 相关文章推荐
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
JavaScript实现打字游戏
Feb 19 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
js实现全选和全不选
2020/07/28 Javascript
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python实现图片转字符画
2021/02/19 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
经典C++面试题一
2016/11/06 面试题
Oracle快照(snapshot)
2015/03/13 面试题
春节超市活动方案
2014/08/14 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
房屋授权委托书范本
2014/10/07 职场文书
社区植树节活动总结
2015/02/06 职场文书
新闻报道稿范文
2015/07/23 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
Python实现简繁体转换
2021/06/07 Python
php png失真的原因及解决办法
2021/11/17 PHP