使用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快捷鍵便可啓動程序界面進行調試，十分方便