本文使用于高级JavaScript开发者,初学者慎入!
本文适用于意图创造类似jQuery库的开发者,掌握了本文所述的方法之后,可以快速地象开发Java或C++一样开发JavaScript。你需要具备一些最基本的知识和工作习惯来实践本文所述的方法:
好了,废话到此为止,下面展开我的工作。
考虑到大多人仍然在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。
下面我详细说明每一步的具体过程。
尽管你可以进入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\
进入C:\NVPACK\cygwin,双击setup.exe,选择internet安装项,搜索相关软件,勾选即可安装相关的包。如果提示需要升级C:\NVPACK\cygwin\setup.exe,用http://www.cygwin.com/setup.exe的最新版文件覆盖替换之。
搜索git,安装相关包。如下图。
运行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。
要正常编译nodejs,必须先在Cywgin的ASH模式下执行rebaseall。步骤如下:
没有错误,完成,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)
$ cd /cygdrive/c/yourfolder/test-html5
# 使用git至少做一次提交
$ git init
$ git add .
$ git commit –m “init”
$ make all
生成的js文件放在dist目录下,可以为工程所使用。核心就是写Makefile和js文件,其他一切都是自动化的。
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}