HTML5学堂:随着时代的发展,JS的地位已经越来越高,NodeJS也是从萌芽开始,茁壮成长~这篇文章我们主要借助weinre这个NodeJS工具,讲解NodeJS工具的安装方法,并且顺带介绍调试工具weinre,weinre主要用于辅助我们进行移动平台的页面的“即时”调试。
利利前面想说的一些话:2016年过年后,HTML5学堂的文章也要开始逐渐更新了,只不过目前每天工作事宜实在是比较多,所以不得不放在凌晨来写写技术文章,跟大家分享~还请大家多多包涵多多支持~!
什么是weinre呢?Weinre的本意是Web Inspector Remote,它是一种远程调试工具。可以帮助我们即时更改页面元素、样式,调试JS等。注意,它的优势在于“即时”,优势在于“即时”,“即时”~!(重要的事儿说三遍)
最早接触weinre其实是在2012年,那时候是自己最早开始尝试WEB APP,使用PhoneGap进行开发,为了方便调试,所以使用了MAC版的weinre。后来随着2013年,WEB APP的“泡沫”逐渐消失,加上Sublime等开发工具的诞生,自己也不太常用PhoneGap进行页面的开发了。今年年后回来之后,听学生提起来了这个软件(weinre),于是想想,也是完全可以跟大家拿出来分享一下的,毕竟这款软件能够加速我们移动端页面的开发。结果突然发现windows版和几年前自己使用的weinre,从安装到使用都有了很大的变化,和HTML5学堂的另一位成员讨论研究了半天,才把这个东西折腾明白。考虑到篇幅的问题,把文章拆分为了两个部分,这篇文章我们主要借助weinre,讲解Node.js的安装方法,并且顺带介绍调试工具weinre,后面的第二篇文章当中我们再讲解weinre的使用。
我们先整体看一下windows系统安装weinre的基本步骤,之后我们再针对这些步骤进行讲解。
1 安装Node.js
2 安装weinre
3 启动weinre
4 链接访问
当前的windows版的weinre是基于NodeJS的,因此如果想使用weinre就需要先搭建NodeJS的环境。用一个不是太合适的例子来说,就是我们现在需要使用JQ的一些插件/框架/类库,那么我们是不是需要先引入jQuery才能够再引入其他的插件?整体上可以这么理解,但是从机制上来说,并不是两个插件的这种关系(希望大家不要完全搞混掉)。
Node的安装其实与大部分的软件类似,“快捷”的“确定到底”的模式即可。具体下载地址可以点击此处——>Node.js下载地址(官方给出的两种均可)
注意:为了方便大家查看,在每个步骤的地方,先书写方法,后贴图。
2.1 打开Node.js的这个程序:Node.js command prompt
2.2 在打开的黑色窗口当中输入:npm install weinre -g
2.3 当看到光标开始旋转时,说明正在安装当中
2.4 当出现四行类似于图中的信息时,表示安装成功
打开Node程序
执行安装weinre的命令
安装成功
3.1 依旧在Node.js command prompt(简称cmd窗口)当中进行操作
3.2 在该cmd窗口中输入:weinre -httpPort 8081 -boundHost -all-
3.3 如果cmd窗口中给出了:年月日时间 weinre: starting server at http://localhost:8081。则说明运行成功
3.4 PS:如果希望停止,在cmd窗口当中使用Ctrl+C的组合键,就能够调出停止命令。
4.1 在浏览器中,打开cmd窗口给出的链接,即 http://localhost:8081
4.2 当呈现出如下图的样式时,也就意味着我们安装成功了~!
关于这个点,我们具体在下一篇文章当中进行讲解~
相信各位在网上查阅相关资料的时候,能够看到这样的代码:npm install weinre;node weinre -httpPort 8081 -boundHost -all-。第一眼看上去和我们讲的内容好像差不多,但是仔细一看,就能够看出和我们讲解的还是有差别的。那么接下来我们就来说说这个差别。
如果在安装过程中没有采用-g的方式(即采用的命令是npm install weinre),那么之后要通过cd 文件路径的命令找到当前weinre项目的位置,再之后再进行运行,具体代码效果如下:
此处我们更推荐之前流程中代码的书写方式,关于具体这两种的区别,在本篇文章的后面会为大家详细讲解。
Node.js窗口类似于我们JavaScript的控制台,用于进行JS文件的运行(如计算)和测试。
Node.js command prompt(通常也叫Node的cmd),主要作用在于两点,一点是使用npm命令,用于安装文件;另一点是使用node命令,执行相关文件。
在这里我们要进行文件的安装,当然要使用所谓的cmd了~
npm是一个NodeJS包管理和分发工具,说得更浅显一些就是针对NodeJS的插件/工具进行管理,能够通过npm对这些插件/工具进行安装、升级、卸载等操作。
HTML5学堂:我们举一个简单的例子吧,苹果手机是iOS系统,而苹果手机当中的所有游戏、应用程序都需要通过APP Store进行下载。那么此时,我们可以认为Node.js就如同iOS的系统,npm就如同APP Store,weinre就如同APP Store中上架的应用程序。
除了weinre之外有没有别的呢?当然有~~~!HTML5学堂官网当中也提到过的一个less工具,其实也是基于node.js的,也是可以通过node.js进行配置和使用的。还有grunt、ckstyle等等工具。那么,如果您希望了解基于node开发了哪些优秀的工具,可以点击此处——>npm的相关工具
当我们理解了npm是什么含义之后,我们就比较好解读这句话了:npm install weinre -g。通过npm告知对方我们要做的是工具包的操作,之后要执行的是安装(install),安装的是weinre这个软件。现在我们可能不能理解的就是-g了。
-g表示的是在全局下进行安装,如果不书写则认为是在本地进行安装。
好吧,问题又来了,什么是全局安装,什么又是本地安装呢?
HTML5学堂:我们可以这样来理解,如果说我们当前开发程序当中,只存在一个weinre的项目,那么为这个“weinre项目”安装一个“weinre工具”无论是安装在全局,还是安装在本地,其实是没有任何区别的,因为我们只有一个项目在使用weinre。那么如果当我们自己不再仅仅是使用插件/工具,而是自己书写Node的项目时,有可能对于我们自己书写的项目也需要使用到weinre,此时,如果weinre是全局安装,则我们在自己的项目当中也能够直接使用,如果weinre是本地安装,就需要在新项目当中引入这个本地安装的weinre工具。
全局安装方式:npm install weinre -g
本地安装方式:npm install weinre
全局安装的位置:C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre
本地安装的位置:C:\Users\Administrator\node_modules\weinre
全局安装:可以在“C:\Users\Administrator>” 状态或其他任意位置进行操作(cmd窗口当中)
本地安装:必须通过cd等命令找到当前的weinre文件位置,再进行操作,即,只能在“C:\Users\Administrator\node_modules\weinre>”状态/位置下进行操作(cmd窗口当中)
全局安装:采用如下命令:weinre -httpPort 8081 -boundHost -all-(cmd窗口当中)
本地安装:采用如下命令:node weinre -httpPort 8081 -boundHost -all-(cmd窗口当中)
HTML5学堂小编建议各位采用全局安装的方法,一方面在插件的操作方面会更便捷,不需要去寻找相应地址;另一方面,对于多个项目的应用也会更简单。
对于cd,如果是非计算机专业或者不熟悉DOS命令的人,可能就直接懵掉了。一起来看一下吧,其实它没有那么难。
cd功能——改变当前目录
类型:内部命令
格式:cd[盘符:][路径名][子目录名]
使用说明:
如果省略路径和子目录名则显示当前目录;如采用“cd\”格式,则退回到根目录;如采用“cd..”格式则退回到上一级目录。
代码:C:\User>cd h5course (含义:进入到C盘下User中的h5course子目录当中)
代码:C:\User\h5course>cd.. (含义:从h5course子目录返回到C盘下User目录当中,即返回上一级根目录)
代码:C:\User>cd\ (含义:返回根目录)
8080和8081其实都是端口号,如果安装过eclipse的设备,8080端口通常都会被eclipse占用,而当端口冲突时,weinre软件自然是不可用的,因此此处推荐采用8081端口,从而防止产生与其他软件的端口冲突问题。
本文章共耗时8小时,责任小编:HTML5学堂-利利。
欢迎沟通交流~HTML5学堂