文档章节

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

TerryZ
 TerryZ
发布于 2016/11/28 17:15
字数 1036
阅读 498
收藏 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

粉丝 37
博文 11
码字总数 9700
作品 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
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
Sublime Text 插件

使用Package Control组件安装 一 按 Ctrl+` 调出console 二 sublime text2 粘贴以下代码到底部命令行并回车: import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.install......

姚欣炜
2014/09/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 7.* 配置网络

配置静态IP 进入配置文件目录 cd /etc/sysconfig/network-scripts 查找以 ifcfg-eno 开头的文件并编辑它 vi ifcfg-ens32 修改文件中的变量值 BOOTPROTO=staticONBOOT=yesIPADDR=192.168...

阿白
56分钟前
1
0
深入理解OAuth2.0协议

1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间。是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题。豪车一般配备两种钥匙:主钥匙和泊...

xtof
今天
1
0
Linux学习-0920

3.4 usermod命令 3.5 用户密码管理 3.6 mkpasswd命令 一、usermode命令 usermode作用是用来修改用户信息。 方法: usermod 参数 username 示例1:修改用户uid usermod -u 1010 test5 示例2...

wxy丶
今天
1
0
synchronized锁对象的坑

今天本来写点其他东西,碰巧写了一下synchronized,没想到掉坑里面了,大佬别笑。 起初代码大概是这样的: package com.ripplechan.part_1_2_3;import java.util.concurrent.CountDownL...

RippleChan
今天
1
0
XAMPP环境搭建(Apache + MariaDB + PHP + Perl)

operation system:ubuntu-18.04.1 step1:download XAMPP #sudo wget https://www.apachefriends.org/xampp-files/7.2.9/xampp-linux-x64-7.2.9-0-installer.run step2:install XAMPP #sudo ......

硅谷课堂
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部