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}/resMODULE_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.jsJS_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.jarVER = 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."; \fimin: 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 updateupdate:@@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}
JavaScript语法检查与构建工具——JSLint和NodeJS的使用相关推荐
- vs2008下的javascript语法检查工具——JSLint.VS
之前一直用Jslint网站帮助检查javascript语法. 不过不是太方便.后来发现jslint.vs,一个vs2008/vs2005的插件.效果很好,借用一下官网的图片如下. 安装十分简单: 1) ...
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...
- 构建工具:grunt、Glup、webpack
相关代码已上传至github 怎么是项目构建? 编译项目中的js, sass, less: 合并js/css等资源文件: 压缩js/css/html等资源文件: JS语法的检查. 构建工具的作用? 简 ...
- 55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
- 前端自动化构建工具Grunt
一.了解Gurnt(http://www.open-open.com/lib/view/open1433898272036.html) Grunt 是一个基于任务的JavaScript工程命令行构建工 ...
- Gradle构建工具的学习与使用
http://my.eoe.cn/william_sim/archive/10691.html Gradle 是以 Groovy 语言为基础,面向Java应用为主.基于DSL(领域特定语言)语法的自动 ...
- TexStudio 英文拼写检查 语法检查
拼写检查 https://blog.csdn.net/stupidautofan/article/details/79673590 句子语法检查 需要下载工具 https://blog.csdn. ...
- java实现html语法检查函数_Html或JS语法检测之JSLint工具
1.介绍 JSLint是一个JavaScript验证工具(非开源), 可以扫描JavaScript源代码来查找问题.如果JSLint发现一 个问题,JSLint就会显示描述这个问题的消息,并指出错误在 ...
- JavaScript验证工具JSLint
微信公众号:前端程序猿之路 关注可了解更多的前端知识,反馈问题或建议,请公众号留言. 如果你觉得公众号内容对你有帮助,欢迎关注并转载 官网链接 官网链接:http://www.jslint.com/j ...
最新文章
- leetcode_1. Two Sum
- 微型计算机中 存储器的主要功能是,在计算机中存储器的主要作用是什么?
- QT实现Three.js将Qt Quick项目用作纹理
- Back button implementation in Text reuse component GSTEXT
- Solr6.1.0Windows安装步骤
- 够学习一辈子的生活经典
- [转载] scala
- django2与ajax,Python-Django-Ajax进阶2
- linux c普通用户怎么判断键盘是否按动_网络没问题,电脑却无法联网怎么办?win10无法联网搞定方式举例...
- 乐高机器人编程自学入门
- 电脑如何清理重复文件,查找电脑重复文件的软件
- ant +design+vue中You may use special comments to disable some warnings. Use // eslint-disable-next-li
- 如何给计算机c盘加内存,增加C盘内存的方法
- react native的WebView报错: Unable to open URL:****
- Domino内置备份功能妙用
- java毕设项目燕理快递中转站系统设计与实现(附源码)
- 请问哪些好用文字转语音软件?
- 百度云盘超出500没办法保存怎么办
- 树莓派4B Raspbian系统常用Linux 命令及快捷键
- Java日期格式2019-11-05T00:00:00转换标准日期