JSDev 是老道(Douglas Crockford)最近搞的一个不太起眼的小玩意，他的大致思路是，对 JavaScript 做预处理，选择性地把注释转为相应的代码。JSDev 处理的注释块有以下两种形式：
- /*<tag> <stuff>*/
- /*<tag>(<condition>) <stuff>*/
然后你可以指定 JSDev 开启哪些 tag，JSDev 就会把这块注释改成相应的代码，而这些注释在 JavaScript 正常运行的时候是不会起作用的，在用 JSMin 等工具压缩后也都会全被去掉，这样就方便了 JavaScript 的开发。
一开始，老道只给出了 C 语言版本的程序，几天后他给出了 JavaScript 版本，我觉得这开始变得有意思了，折腾了两天，想试看能否用到今后的开发项目中去。下面我们先以 C 程序为例说明 JSDev 的用法，然后说说怎样通过 JavaScript 版本把它用在 node 开发或者前端开发过程中。本文假定你在类 Unix 系统(Linux/FreeBSD/Mac OS)下工作并且对命令行、node 编程都有一定了解。
C 语言版本 和 JSDev 的用法
先从 github 上 clone 我的 fork，把 C 源码编译成可执行文件。
- git clone https://github.com/yuest/jsdev.git #clone github 上的源代码到本地
- cd jsdev
- gcc jsdev.c #编译 C 版本
- sudo mv a.out /usr/local/bin/jsdev #把编译好的可执行文件移动到一个 $PATH 底下的目录
现在我们就可以用 jsdev 来运行程序了。可是在命令行输入 jsdev 并回车，却什么都没有，原来老道只做了这工具最核心的部分，而未在软件界面下什么功夫，所以连个命令用法提示也没有。作为预处理器，它只会从 stdin 吃进 JavaScript 代码，然后把处理过的代码从 stdout 拉出来，至于文件操作嘛，用 unix 命令行的管道特性就可以啦。
普及一下，要把文件，比如说 in.js 当 stdin 输入到 jsdev 程序，使用小于符号 < 就行，如 jsdev <in.js，而输出就是用大于符号 > 啦：jsdev <in.js >out.js 就可以。如果要尝试 jsdev，只需要用 jsdev <in.js 就可以把结果输出到屏幕上方便查看，或者你甚至可以配合使用 echo 命令来测试简单的单行代码。如 echo "/*tag 'stuff'*/" |jsdev tag
只运行 jsdev <in.js >out.js 这个命令不会对 in.js 有任何改动，我们需要以 tag 为参数调用 jsdev 命令来指定需要开启的 tag，多个空格间用空格分开。以例子来说明，如果 in.js 代码如下：
- /*hello console.log('Hello, World!')*/
- /*hi console.log('Hi, there.')*/
那么 jsdev <in.js hello 会输出如下代码：
- {console.log('Hello, World!')}
- /*hi console.log('Hi, there.')*/
而 jsdev <in.js hello hi 则是：
- {console.log('Hello, World!')}
- {console.log('Hi, there.')}
这里的花括号是为了避免与程序中其他部分发生关联而加的，主要问题是 JavaScript 有行尾自动插入分号的设计，如果不加花括号把上下文隔开，可能会与前后行产生关联，比如变成上一行的函数调用之类。花括号实际上是把多个语句复合成一个语句，最常见的地方是用在 if 等仅接受一个语句的关键字后。JavaScript 里面的花括号不会产生一个命名空间。
你可以为 tag 指定一个函数名，于是此 tag 指定的注释块就会被这个函数名 wrap（有点像 JSONP），如以下 in.js：
- /*log some_variable*/
用命令 jsdev <in.js log:console.log 输出的是：
- {console.log(some_variable);}
这可以用于调试代码时打印当时状态下的某些变量值，会比较方便。
另外还可以为注释块指定条件，如下的 in.js：
- var name = 'Yuest'
- /*hello console.log('Hello, World!')*/
- /*hello(name === 'Celine') console.log('Hello, Celine!')*/
用命令 jsdev <in.js hello 输出：
- var name = 'Yuest'
- {console.log('Hello, World!')}
- if (name === 'Celine') {console.log('Hello, Celine!')}
如果运行这段代码，很显然只会输出 Hello, World!。
指定函数和条件也可以同时使用，如：
- var name = 'Yuest'
- /*log 'Hello, World!'*/
- /*log(name === 'Ling') 'Hello, Ling!'*/
用命令 jsdev <in.js log:console.log 输出：
- var name = 'Yuest'
- {console.log('Hello, World!');}
- if (name === 'Ling') {console.log('Hello, Ling!');}
和前面几乎是一样的，但注释短了不少。以上就是关于 JSDev 使用方法的一切了。其实最核心的是 /*<tag> <stuff>*/ 这种形式，我们可以完全只用这种形式来达到上面一样的目的：
- var name = 'Yuest'
- /*hello console.log('Hello, World!')*/
- /*hello if (name === 'Ling') {console.log('Hello, Ling!')}*/
上面的代码用命令 jsdev <in.js hello 输出：
- var name = 'Yuest'
- {console.log('Hello, World!')}
- {if (name === 'Ling') {console.log('Hello, Ling!')}}
所以可以看出，为 tag 指定函数名和条件只是做了一些简化而已。
哦对了，还忘了 jsdev 命令接受一个 -comment 参数为输出的文件头部添加注释，如对于上面的 in.js 文件，运行一下命令：
- jsdev <in.js hello -comment "Author: Yuest" -comment "This is a temporary file generated by JSDev"
会获得：
- // Author: Yuest
- // This is a temporary file generated by JSDev
- var name = 'Yuest'
- {console.log('Hello, World!')}
- {if (name === 'Ling') {console.log('Hello, Ling!')}}
嗯，以上就真的是关于 JSDev 用法的一切了，而关于要如何用好它，则需要他的使用者有一点想象力。比如，你可以写一些 bash 脚本什么的。下面说说 JavaScript 版本的 JSDev 以及我想到的用在 node 项目的方法。
JavaScript 版本和 node 中用法
老道给出的 jsdev.js 里面只定义了一个 JSDEV 函数，接受三个参数，***个参数是要处理的源代码，第二、三个参数是两个数组，分别指定 tag 和注释。如果上面***一条命令用 JavaScript 版本来处理，就应该是：
- JSDEV( input
- , ['hello']
- , ['Author: Yuest', 'This is a temporary file generated by JSDev'])
我的 fork 为 node 加上了 exports.JSDEV = JSDEV，并 publish 到 npm 上了，你只需 npm install jsdev 或者在 package.json 里面加上 jsdev 的依赖，并在源码里
- var JSDEV = require('jsdev').JSDEV
就可以使用 JavaScript 版本的 JSDEV() 函数了。
因为 node 可以通过修改 module.constructor.prototype._compile 来修改要载入的文件，非常适合拿来应用 JSDev 这种预处理器。我的想法是，一个文件要开启哪些 tag 下的注释块，应该在其自身（也是用注释）来描述。如果程序载入了 jsdev 并调用其 replaceRequire 方法（require('jsdev').replaceRequire()），之后再 require 进的文件有 //@jsdev tag1 tag2 这样的注释，就会用 jsdev 开启 tag1、tag2 指定的注释块。
指定开启 tags 的规则这样写：
- //@jsdev(test,production) tag1 tag2
- //@jsdev(development) tag3
以上注释行表示在环境变量 NODE_ENV=test 或 NODE_ENV=production 的时候开启本文件的 tag1 tag2 注释块，在 NODE_ENV=development 时开启 tag3 注释块。如果没有 jsdev 后面的括号，默认是 development，因此可以写成
- //@jsdev(test,production) tag1 tag2
- //@jsdev tag3
例如有 a.js:
- require('jsdev').replaceRequire()
- require('./b')
b.js:
- //@jsdev(test,production) hello
- //@jsdev hi
- /*hello console.log('hello')*/
- /*hi console.log('hi')*/
则运行 node a.js 会输出 hi，而运行NODE_ENV=test 则会输出 hello
另外，对于前端开发也是一样的，有 replaceStatic() 函数，可以替换 connect/express 的 static middleware。这样就可以预处理通过 static middleware 返回到浏览器的 js 文件。文件内 tag 开启的规则和前面写的一样。需要注意的是要在使用 connect.static(root) 之前调用 replaceStatic()。
更多的例子可以参考我写的测试，在迁出的代码中 ./runtests （当然要确保 npm 依赖已经安装，即在目录下运行 npm install）就可以运行测试。我在这里提供这个很通用的工具的用法，要怎样用好它（什么环境设定什么 tag 之类），就要靠用户的想象力了吧。
有不足的地方欢迎指证，可以到 github 里面去提 issue。
原文：http://club.cnodejs.org/topic/4f3b65a1b43c3c846a05518c
【编辑推荐】
