node.js中watch机制详解

几乎所有构建系统都选择使用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插件组成的管道中，则输出便是浏览器需要的文件。

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

赞 (0)

相关推荐

  • 详解Node.js中的事件机制

    前言 在前端编程中,事件的应用十分广泛,DOM上的各种事件.在Ajax大规模应用之后,异步请求更得到广泛的认同,而Ajax亦是基于事件机制的. 通常js给我们的第一印象就是运行在客户端浏览器上面的脚本,通过node.js我们可以在服务端运行javascript. node.js是基于单线程无阻塞异步式的I/O,异步式的I/O指的是当遇到I/O操作的时候,线程不阻塞而是进行下面的操作,那么I/O操作完成之后,线程时如何知道该操作完成的呢? 当操作完成耗时的I/O操作之后,会以事件的形式通知I/O操

  • Node.js（安装，启动，测试）

    Node.js（安装，启动，测试）

    概念 Node.js 是构建在Chrome javascript runtime之上的平台,能够很容易的构建快速的,可伸缩性的网络应用程序.Node.js使用事件驱动,非阻塞I/O 模式,这使它能够更轻量,高效且完美的适用于运行在分布式设备之间的数据密集型实时应用程序. 安装 这里主要介绍基于windows平台上最简单方便的安装方式,我们首先直接访问node.js官方网站http://www.nodejs.org/,直接点击Install按钮开始下载安装. 点击Run按钮开始运行 继续点击Nex

  • 简单模拟node.js中require的加载机制

    一.先了解一下,nodejs中require的加载机制 1.require的加载文件顺序 require 加载文件时可以省略扩展名: require('./module'); // 此时文件按 JS 文件执行 require('./module.js'); // 此时文件按 JSON 文件解析 require('./module.json'); // 此时文件预编译好的 C++ 模块执行 require('./module.node'); // 载入目录module目录中的 package.js

  • 一行命令搞定node.js 版本升级

    node有一个模块叫n(这名字可够短的...),是专门用来管理node.js的版本的. 首先安装n模块: npm install -g n 第二步: 升级node.js到最新稳定版 n stable 是不是很简单?! n后面也可以跟随版本号比如: n v0.10.26 或 n 0.10.26 就这么简单,这可怎么办??!! 另外分享几个npm的常用命令 npm -v #显示版本,检查npm 是否正确安装. npm install express #安装express模块 npm install

  • 跟我学Node.js（四）---Node.js的模块载入方式与机制

    跟我学Node.js（四）---Node.js的模块载入方式与机制

    其它的如通过NPM安装的第三方模块(third-party modules)或本地模块(local modules),每个模块都会暴露一个公开的API.以便开发者可以导入.如 复制代码 代码如下: var mod = require('module_name') 此句执行后,Node内部会载入内置模块或通过NPM安装的模块.require函数会返回一个对象,该对象公开的API可能是函数,对象,或者属性如函数,数组,甚至任意类型的JS对象. 这里列下node模块的载入及缓存机制 1)载入内置模块(

  • 跟我学Nodejs（一）--- Node.js简介及安装开发环境

    跟我学Nodejs（一）--- Node.js简介及安装开发环境

    学习资料 1.深入浅出Node.js 2.Node.js开发指南 简介(只捡了我觉得重要的) Node.js是让Javascript脱离浏览器运行在服务器的一个平台,不是语言: Node.js采用的Javascript引擎是来自Google Chrome的V8:运行在浏览器外不用考虑头疼的Javascript兼容性问题 采用单线程.异步IO与事件驱动的设计来实现高并发(异步事件也在一定程度上增加了开发和调试的难度): Node.js内建一个HTTP服务器,所以对于网站开发来说是一个好消息:  

  • 学习Node.js模块机制

    学习Node.js模块机制

    一.CommonJS的模块规范 Node与浏览器以及 W3C组织.CommonJS组织.ECMAScript之间的关系 Node借鉴CommonJS的Modules规范实现了一套模块系统,所以先来看看CommonJS的模块规范. CommonJS对模块的定义十分简单,主要分为模块引用.模块定义和模块标识3个部分. 1. 模块引用 模块引用的示例代码如下: var math = require('math'); 在CommonJS规范中,存在require()方法,这个方法接受模块标识,以此引入一

  • Node.js与Sails ~项目结构与Mvc实现及日志机制

    Node.js与Sails ~项目结构与Mvc实现及日志机制

    本文首先从sails的安装讲起接下来介绍node.js与Sails的日志机制,小伙伴们已经迫不及待要看下文了吧,好吧. Sails是一个Node.js的中间件架构,帮助我们很方便的构建WEB应用程序,网址:http://www.sailsjs.org/,它主要是在Express框架的基础上发展起来的,扩展了新的功能组件,下面我们来看一下安装方法 一 安装Sails npm -g install sails 二 建立一个Sails的项目 sails new testProject 三 启动项目 c

  • Node.js中的模块机制学习笔记

    Node.js中的模块机制学习笔记

    Javascript自诞生以来,曾经没有人拿它当做一门编程语言.在Web 1.0时代,这种脚本语言主要被用来做表单验证和网页特效.直到Web 2.0时代,前端工程师利用它大大提升了网页上的用户体验,JS才被广泛重视起来.在JS逐渐流行的过程中,它大致经历了工具类库.组件库.前端框架.前端应用的变迁.Javascript先天就缺乏一项功能:模块,而CommonJS规范的出现则弥补了这一缺陷.本文将介绍CommonJS规范及Node的模块机制. 在其他高级语言中,Java有类文件,Python有im

  • node.js中的事件处理机制详解

    node.js中的事件处理机制详解

    EventEmitter类 在Node.js的用于实现各种事件处理的event模块中,定义了一个EventEmitter类.所有可能触发事件的对象都是一个集成了EventEmitter类的子类的实例对象,在Node.js中,为EventEmitter类定义了许多方法,所有与对象的事件处理函数的绑定及解除相关的处理均依靠这些方法的调用来执行. EventEmitter类的各种方法 event:代表事件名 listener:代表事件处理函数 中括号内的参数代表该参数为可选参数 方法名与参数 描述 a

随机推荐