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

在使用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快捷键便可启动程序界面进行调试，十分方便