JavaScript语法检查与构建工具——JSLint和NodeJS的使用

JavaScript语法检查与构建工具——JSLint和NodeJS的使用

本文使用于高级JavaScript开发者，初学者慎入！
本文适用于意图创造类似jQuery库的开发者，掌握了本文所述的方法之后，可以快速地象开发Java或C++一样开发JavaScript。你需要具备一些最基本的知识和工作习惯来实践本文所述的方法：

对命令行不恐惧；
对Makefile稍微有点了解；
喜欢控制细节而不是交给一个黑盒工具；
最后也是最重要的一点就是你是个Linux粉丝，希望在Windows和Linux上都能无缝地进行工作切换。

好了，废话到此为止，下面展开我的工作。
考虑到大多人仍然在Windows上开发软件，因此本文以Cygwin为工作环境来说明问题。本文的方法在Windows7/Linux（Ubuntu 12.10）上测试通过。Cygwin是一个运行在Windows上的虚拟Unix操作系统。在Linux上开发相对简单，只要安装最新的nodejs即可。而在Windows上需要安装Cygwin。
第1步：下载安装cygwin。
第2步：在cygwin上需要安装的软件：git，curl，nodejs，npm。
第3步：下载JSLint。
第4步：创建自己的JS工程包目录，用任一你喜欢的软件编写JS文件。写Makefile。
第5步：运行cygwin，运行make命令，构建JS。
 
下面我详细说明每一步的具体过程。

第1步：下载安装cygwin。

尽管你可以进入cygwin网站直接下载一个，但我是到nvidia网站下载了一个囊括了eclipse/cygwin/Java/C/C++/Android/Ant…的组合开发工具：
Tegra Android Developer Pack
进入http://developer.nvidia.com/tegra-resources网址，下载：Tegra Android Developer Pack 1.0r5。
http://developer.nvidia.com/sites/default/files/akamai/tools/files/Tegra/tegra-devpack-1.0-windows-2012-02-21-11617556.exe
下载后双击tegra-devpack-1.0-windows-2012-02-21-11617556.exe，安装至：C:\NVPACK。并自动更新需要的安装包。默认选择全部安装。
尽管我们只需要NVPACK里面的cygwin这个一小部分的东西，但是由于我还需要整个开发组合中的其他组件，因此这是我采用的方法。如果只想安装cygwin，则可以参考有关文档自行解决之。
C:\NVPACK\cygwin\

第2步：在cygwin上需要安装的软件：git，curl，nodejs，npm。

进入C:\NVPACK\cygwin，双击setup.exe，选择internet安装项，搜索相关软件，勾选即可安装相关的包。如果提示需要升级C:\NVPACK\cygwin\setup.exe，用http://www.cygwin.com/setup.exe的最新版文件覆盖替换之。

1）安装git

搜索git，安装相关包。如下图。

2）下载NodeJS

运行cygwin命令行Cygwin.bat：
$ wgethttp://nodejs.org/dist/node-v0.4.12.tar.gz
 在Cygwin下面一定是node-v0.4.12.tar.gz，因为最新的版本0.8.18已经不支持Cygwin了。在Linux下可以安装最新的0.8.18。

3）编译安装NodeJS（使用make命令构建js和css要用到nodejs）

要正常编译nodejs，必须先在Cywgin的ASH模式下执行rebaseall。步骤如下：

退出cygwin，启动Windowscmd命令行
进入cygwin安装目录下的bin子目录
运行ash进入shell模式
./rebaseall -v

没有错误，完成，exit退出ash，关闭命令行窗口。下面开始编译NodeJS，启动cygwin，进入相关目录：
  $tar xzf node-v0.4.12.tar.gz
  $cd node-v0.4.12
  $./configure --prefix=/usr/local
  $make
  $make install

4）配置nodejs DNS
cygwin内部是使用windows的DNS查询，而nodejs另外使用的是c-ares库来解析DNS，这个库会读取/etc/resolv.conf里的nameserver配置，而默认是没有这个文件的，需要自己建立并配置好DNS服务器的IP地址，这里使用Google Public DNS服务器的IP地址：8.8.8.8和8.8.4.4。
编辑文件：C:\NVPACK\cygwin\etc\resolv.conf，内容如下：
nameserver 8.8.8.8
nameserver 8.8.4.4
 
5）在cygwin中安装curl
同3），搜索curl，安装相关包
 
6）安装npm
npm 是nodejs的软件包管理器，可以用它安装所需软件包并发布自己为nodejs写的软件包，它还管理软件包的依赖关系。
  $curl http://npmjs.org/install.sh | sh
npm安装node扩展包命令：
  $npm install <pkg>

7）测试nodejs
a 查看nodejs的版本信息:
 $node –version
 
b 编写一个简单的test.js文件测试nodejs的Http Server.
UTF-8编码保存test.js文件如下内容：
//-----------------------------------------------------------------------------------------------------------------------
var http = require('http'),port = 8888;
http.createServer(function(request,response){
 response.writeHead(200,{'Content-Type':'text/html;charset=utf-8;'});
 response.end('<h1>NodeJS的世界！</h1>');
}).listen(port);
console.log('服务已启动http://127.0.0.1:'+port+'/');
//----------------------------------------------------------------------------------------------------------------------- 

c 启动HTTP服务
  $node test.js

  浏览器url输入:
  http://127.0.0.1:8888/
test.js如有更改，CTRL+C停止Http Server，然后重新开启，
  $node test.js
 
8）使用Makefile编译javascript工程（jslint、uglifyjs/java/YUICompressor）

在Windows中创建工程目录，如：c:\yourfolder\test-html5
在test-html5目录下创建src子目录，在src中加入新文件map.js, map2.js, …
在test-html5目录下创建Makefile文件，内容见附件test-html5\Makefile。
在test-html5目录下创建build目录，内容见附件test-html5\build。Build内包含用到的build工具。
进入cygwin命令行工具：

$ cd /cygdrive/c/yourfolder/test-html5
# 使用git至少做一次提交
$ git init
$ git add .
$ git commit –m “init”

 然后可以用make命令来验证、压缩js和css文件了。以后要做的就是进入cygwin命令行工具：

  $ make all
生成的js文件放在dist目录下，可以为工程所使用。核心就是写Makefile和js文件，其他一切都是自动化的。

 附件，Makefile:

PREFIX = .
SRC_DIR = ${PREFIX}/src
TEST_DIR = ${PREFIX}/test
BUILD_DIR = ${PREFIX}/build
DIST_DIR = ${PREFIX}/dist
DEP_DIR = ${PREFIX}/.dep
BIN_DIR = ${PREFIX}/.bin
SCRIPT_DIR = ${DIST_DIR}/script
RES_DIR = ${DIST_DIR}/res

MODULE_NAME = jLayers
MODULE_JS = jlayers.js
MODULE_MIN_JS = jlayers.min.js
MODULE = ${DIST_DIR}/script/${MODULE_JS}
MODULE_MIN = ${DIST_DIR}/script/${MODULE_MIN_JS}
MODULE_VER = `cat version.txt`

PLUGINS = $(shell ls -p ${SRC_DIR} | grep / | xargs)
PLUGINS_JS = $(if ${PLUGINS},$(shell find ${PLUGINS:%=${SRC_DIR}/%/} -name "*.js" 2> /dev/null),"")
PLUGINS_CSS = $(if ${PLUGINS},$(shell find ${PLUGINS:%=${SRC_DIR}/%/} -name "*.css" 2> /dev/null),"")

JS_MODULES = ${SRC_DIR}/header.txt\
${SRC_DIR}/begin.js\
${PLUGINS_JS}\
${SRC_DIR}/canvas.js\
${SRC_DIR}/drawinfo.js\
${SRC_DIR}/layer.js\
${SRC_DIR}/layers.js\
${SRC_DIR}/shape.js\
${SRC_DIR}/shapes.js\
${SRC_DIR}/image.js\
${SRC_DIR}/images.js\
${SRC_DIR}/imagestate.js\
${SRC_DIR}/imageloader.js\
${SRC_DIR}/render.js\
${SRC_DIR}/render.lineargradient.js\
${SRC_DIR}/render.radialgradient.js\
${SRC_DIR}/symbol.js\
${SRC_DIR}/recttype.js\
${SRC_DIR}/pointtype.js\
${SRC_DIR}/arctype.js\
${SRC_DIR}/circletype.js\
${SRC_DIR}/linetype.js\
${SRC_DIR}/polylinetype.js\
${SRC_DIR}/polygontype.js\
${SRC_DIR}/beziertype.js\
${SRC_DIR}/viewport.js\
${SRC_DIR}/error.js\
${SRC_DIR}/bresenham.js\
${SRC_DIR}/end.js

JS_ENGINE = `which node`
JS_LINT = ${JS_ENGINE} $(PREFIX)/jslint-check.js
JS_MINIFIER = ${JS_ENGINE} ${BIN_DIR}/uglify.js --extra
CSS_MINIFIER = java -Xmx96m -jar ${BIN_DIR}/yuicompressor.jar

VER = sed s/@VERSION/${MODULE_VER}/
DATE=`git log --pretty=format:'%ad' -1`

all: clean lint min
@@echo ${PLUGIN_JS}
@@echo "all built successfully!"

init: ${JS_MODULES}
@@mkdir -p ${BUILD_DIR}
@@mkdir -p ${DIST_DIR}
@@mkdir -p ${SCRIPT_DIR}
@@mkdir -p ${RES_DIR}
@@chmod -R 777 ${PREFIX}/
@@cp -R ${SRC_DIR}/* ${BUILD_DIR}/
@@echo "building "${MODULE_NAME}" ..."
@@echo "Enabled plugins: " $(if ${PLUGINS},"${PLUGINS:%/=%}", "None")
@@cat ${JS_MODULES} | sed 's/@DATE/'"${DATE}"'/' | ${VER} > ${MODULE};
@@echo ${MODULE_NAME}" built successfully"

lint: init
@@if test ! -z ${JS_ENGINE}; then \
echo -n "Checking against JSLint... "; \
${JS_LINT}; \
else \
echo "You must have NodeJS installed to test "${MODULE_JS}" against JSLint."; \
fi

min: init
@@if test ! -z ${JS_ENGINE}; then \
echo -n "Minifying "${MODULE_NAME}" ..."; \
head -18 ${MODULE} > ${MODULE_MIN}; \
${JS_MINIFIER} ${MODULE} > ${MODULE_MIN}.tmp; \
sed '$ s#^\( \*/\)\(.\+\)#\1\n\2;#' ${MODULE_MIN}.tmp > ${MODULE_MIN}; \
rm -rf $(MODULE_MIN).tmp; \
echo "Success!"; \
else \
echo "You must have NodeJS installed to minify "${MODULE_JS}; \
fi

.PHONY: clean update

update:
@@echo "------ update "${MODULE_NAME}" ------"
@@echo "copying " ${DEP_DIR}/prequisite.js "to" ${SCRIPT_DIR}
@@cp ${DEP_DIR}/prequisite.js ${SCRIPT_DIR}
@@cp ${DEP_DIR}/prequisite.min.js ${SCRIPT_DIR}
@@echo "copying " ${TEST_DIR}/test-layers.html "to" ${DIST_DIR}
@@cp ${TEST_DIR}/test-layers.html ${DIST_DIR}
@@echo "copying " ${TEST_DIR}/test-layers.js "to" ${SCRIPT_DIR}
@@cp ${TEST_DIR}/test-layers.js ${SCRIPT_DIR}
@@echo "copying " ${TEST_DIR}/res/* "to" ${RES_DIR}
@@cp -R ${TEST_DIR}/res/* ${RES_DIR}

clean:
@@echo "clean: removing directories: " ${BUILD_DIR} ${DIST_DIR}
@@rm -rf ${BUILD_DIR}
@@rm -rf ${DIST_DIR}