文档章节

使用Sublime快速开发node-webkit客户端程序

TerryZ
 TerryZ
发布于 2016/11/28 17:15
字数 1036
阅读 502
收藏 23

在使用node-webkit进行客户端开发时,如何开发调试就成了一个比较麻烦的问题,通常来说,我们需要将Web程序代码写好后,将根目录打包成一个zip包,再将zip包拖拽到nw.js上进行运行;在刚开始学习node-webkit开发时,只知道用这样的方式调试程序,但显然这样很不优雅高效。

查阅官方文档后,实际可以使用Sublime这个文本编辑器进行开发调试,而不用反复的打包

Sublime text是非常优秀的跨平台编辑器用于开发node-webkit应用,首先要下载后在本机上安装。

下面说说在各大平台上使用、配置的具体内容(以sublime text 2为例)

Mac OS X

1.下载node-webkit.app并放在/Application文件夹内
2.从sublime text 2菜单选择Tools -> Build System -> New Build System
3.输入以下代码:

{
    "cmd": ["node-webkit", "--enable-logging", "${project_path:${file_path}}"],
    "working_dir": "${project_path:${file_path}}",
    "path": "/Applications/node-webkit.app/Contents/MacOS/"
}

注意:如果package.json位于项目根目录中,为了方便从任何子目录查看文件时启动NW,则可以使用$ {project_path}而不是$ {project_path:$ {file_path}}

实际上经过测试,如果package.json在项目的根目录,而你希望在编辑任何一个HTML或JS的时候就可以直接编译运行,应该设置成使用项目的目录变量:

${project_path:${folder}}

4.将配置内容保存为nodeWebKit.sublime-bulid

5.使用sublime text 2的File -> New Window打开一个新的窗口
6.使用 Project -> Add Folder to Project添加一个工程到当前窗口中
7.从左侧的菜单中打开你的主应用程序文件(例如:index.html)然后选择Tools -> Build

8.选择 Tools -> Build System -> nodeWebKit (仅 Sublime Text 3 需要执行该步骤)

9.选择 Tools -> Build

10.此时node-webkit应用程序将会启动你的项目并且可以在sublime text2中看到调试输出

在sublime text 3中操作步骤一样,只需要注意第8点即可。

Windows

同上面一样,不同的是建立系统的命令,如下所示(替换掉nw.exe的实际路径):

{
    "cmd": ["nw.exe", "--enable-logging", "${project_path:${file_path}}"],
    "working_dir": "${project_path:${file_path}}",
    "path": "C:/Tools/node-webkit/",
    "shell": true
}

1.到 https://nwjs.io/ 下载node-webkit的sdk开发包,并解压,本文示例解压在D:/dev/node-webkit/下

2.从sublime text 2菜单选择Tools -> Build System -> New Build System  

3.输入以下代码:

{
    "cmd": ["node-webkit", "--enable-logging", "${project_path:${file_path}}"],
    "working_dir": "${project_path:${file_path}}",
    "path": "/Applications/node-webkit.app/Contents/MacOS/"
}

注意:如果package.json位于项目根目录中,为了方便从任何子目录查看文件时启动NW,则可以使用$ {project_path}而不是$ {project_path:$ {file_path}}

以上是官方文档提供的设置内容,经过测试,如果package.json在项目的根目录,而你希望在编辑任何一个HTML或JS的时候就可以直接编译运行,可按照以下设置达到效果:

{
    "cmd": ["nw.exe", "--enable-logging", "${project_path:${folder}}"],
    "working_dir": "${project_path:${folder}}",
    "path": "D:/dev/node-webkit/",
    "shell": true
}

4.将配置内容保存为nodeWebKit.sublime-bulid,保存目录会是在d:/Sublime.Text.3/Data/Packages/User,这里我们假设sublime3安装在d:/Sublime.Text.3/目录下

5.使用sublime text 2的 File -> New Window打开一个新的窗口

6.使用 Project -> Add Folder to Project添加一个工程到当前窗口中

7.从左侧的菜单中打开你的主应用程序文件(例如:index.html)然后选择Tools -> Build

8.选择 Tools -> Build System -> nodeWebKit (仅 Sublime Text 3 需要执行该步骤)

9.选择 Tools -> Build

10.此时node-webkit应用程序将会启动你的项目并且可以在sublime text2中看到调试输出

在sublime text 3中操作步骤一样,只需要注意第8点即可。

 

Linux

与Mac OS一样, 只需要替换 "path" 参数为 nw 命令的实际路径

使用命令 which nw 查找nw命令在linux中的实际存储位置,(例如返回 /usr/bin/nw), 所以在这种情况下,nw就在 /usr/bin目录

实例:

{
    "cmd": ["nw", "--enable-logging", "${folder}"],
    "working_dir": "${folder}",
    "path": "/usr/bin/"
}

 

经过以上的配置后,编辑完页面或脚本后,仅需操作ctrl + B快捷键即可启动程序界面进行调试,十分方便

© 著作权归作者所有

共有 人打赏支持
TerryZ

TerryZ

粉丝 42
博文 11
码字总数 9767
作品 13
福州
架构师
私信 提问
加载中

评论(4)

TerryZ
TerryZ

引用来自“yd5206”的评论

ctrl+B 是能打开窗口了,代码里有console.log('hi'),调试页面为什么看不到hi呢?
按F12,打开Chrome的控制台就可以看到了
y
yd5206
ctrl+B 是能打开窗口了,代码里有console.log('hi'),调试页面为什么看不到hi呢?
uni7corn
uni7corn
mark
LiShixi
LiShixi
先收着了
一站式手把手教你学习Sublime Text 3(插件安装、html/css速写、输入法不根随光标)

Sublime Text 是一款流行的代码编辑器软件,也是HTML和散文先进的文本编辑器,可运行在Linux,Windows和Mac OS X。也是许多程序员喜欢使用的一款文本编辑器软件。下面就重点介绍一下Sublime...

明成51xit
04/26
0
0
Sublime Text 2 入门

首语 : 考完试,但又没什么兴趣做课程设计,蛋疼的弄点软件入门的介绍,希望给各位还在吃香蕉的程序猿带来一点启示。。。 代码编辑器,就像武侠中的武器,谁都希望能有一把神兵,而每个程序...

若晨辰
2013/01/03
0
4
Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS...

飞翔的熊blabla
10/09
0
0
nodejs 开发工具 sublime

这个工具很强大,可以作为好多语言的ide 这里用他做nodejs的开发工具 , 简洁的界面和不错的函数提示 是是我用他的主要原因 上接nodejs环境配置完毕 1.下载 sublime text 3 我是在百度网盘上...

skyyan2000
2014/04/23
0
0
如何优雅地使用Sublime Text

Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受。相比于难于上手的Vim,浮肿沉重的E...

jeffjade
2015/12/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

BigDecimal 比较大小

通过BigDecimal的compareTo方法来进行比较。 返回的结果是int类型: -1表示小于,0是等于,1是大于

嘴角轻扬30
15分钟前
2
0
PHP实现excel导出

1:前端代码 <div id=‘export’>导出excel表单</div> // //导入excel文件 $("#export").on('click', function(){ $.ajax({ url:"importexcel.php", type:'POST', dataType:'json', data:{}......

葬-花
16分钟前
2
0
内存性能的正确解读

一台服务器,不管是物理机还是虚拟机,必不可少的就是内存,内存的性能又是如何来衡量呢。 1. 内存与缓存 现在比较新的CPU一般都有三级缓存,L1 Cache(32KB-256KB),L2 Cache(128KB-2MB)...

阿里云官方博客
18分钟前
2
0
《边缘云计算技术及标准化白皮书》

12月12日,第八届中国云计算标准和应用大会在北京隆重召开,工业和信息化部党组成员,总工程师张峰先生,中国工程院副院长陈左宁女士,中国工程院院士沈昌祥先生,中国电子技术标准化研究院院...

阿里云云栖社区
19分钟前
2
0
iOS 官方文档

https://developer.apple.com/library/prerelease/content/navigation/#section=Platforms&topic=iOS...

walking_yxf
32分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部