使用Sublime快速开发node-webkit客户端程序
博客专区 > TerryZ 的博客 > 博客详情
使用Sublime快速开发node-webkit客户端程序
TerryZ 发表于1年前
使用Sublime快速开发node-webkit客户端程序
  • 发表于 1年前
  • 阅读 488
  • 收藏 23
  • 点赞 0
  • 评论 4

【腾讯云】新注册用户域名抢购1元起>>>   

在使用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
粉丝 24
博文 9
码字总数 6793
作品 7
评论 (4)
LiShixi
先收着了
uni7corn
mark
yd5206
ctrl+B 是能打开窗口了,代码里有console.log('hi'),调试页面为什么看不到hi呢?
TerryZ

引用来自“yd5206”的评论

ctrl+B 是能打开窗口了,代码里有console.log('hi'),调试页面为什么看不到hi呢?
按F12,打开Chrome的控制台就可以看到了
×
TerryZ
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: