文档章节

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

TerryZ
 TerryZ
发布于 2016/11/28 17:15
字数 1036
阅读 496
收藏 23
点赞 0
评论 4

在使用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
博文 10
码字总数 9190
作品 11
福州
架构师
加载中

评论(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 插件

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

姚欣炜
2014/09/15
0
0
10分钟快速配置sublime2支持jQuery开发

来源:GBin1.com 昨天介绍了javascript的开发工具sublime 2 edit,今天我们将介绍如何10分钟快速配置sublime2支持jQuery开发。希望大家能喜欢着款jQuery开发工具。 相关介绍:使用sublime t...

gbin1
2011/11/09
0
0
Sublime Text 2 小技巧和小诀窍

这已经不是我第一次介绍Sublime text这个文字编辑器了。它是跨平台的(linux,win,MAC) 目前Sublime 2 还在开发中,可到这里下载开发版: Sublime 2 dev Sublime 2 beta 使用Command Palette...

pureboys
2012/07/26
0
2
在Ubuntu 14.04中使SublimeText 3支持中文输入法

在Ubuntu 14.04中安装了SublimeText 3之后发现既然不支持输入中文,于是在网上搜罗一下,发现很多人遇到了同样的问题,但是解决办法大该就只有一个。下面根据自身的安装及解决办法总结如下:...

赵小宾
2015/05/19
0
0
全栈开发必备的10款Sublime Text 插件

全栈开发必备的10款Sublime Text 插件 来源:梦想天空博客园 时间:2014-11-28 10:16:28 阅读数:218406 分享到:6 [导读] Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多...

thinkyoung
2015/11/05
0
0
Sublime Text 全程指南

安装(Installation) Sublime Text 官方网站 提供了Sublime Text各系统各版本的下载,目前Sublime Text的最新版本是 Sublime Text 3 。这里以Windows版本的Sublime Text安装为例。 注意在安...

_子墨
2014/12/29
0
3
值得收藏!神级代码编辑器 Sublime Text 全程指南

作者:Lucida 微博:@penggong 豆瓣:@figure9 原文链接:http://lucida.me/blog/sublime-text-complete-guide/ 摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的Subli...

TomatosX
2015/07/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring boot中swagger2使用

1.pom.xml中添加 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.9.2</version>......

说回答
3分钟前
0
0
tomcat虚拟路径的几种配置方法

tomcat虚拟路径的几种配置方法 一般我们都是直接引用webapps下面的web项目,如果我们要部署一个在其它地方的WEB项目,这就要在TOMCAT中设置虚拟路径了,Tomcat的加载web顺序是先加载 $Tomcat_ho...

Helios51
16分钟前
1
0
Mac 安装jupyter notebook的过程

MAC台式机 python:mac下自带Python 2.7.10 1.先升级了pip安装工具:sudo python -m pip install --upgrade --force pip 2.安装setuptools 工具:sudo pip install setuptools==33.1.1 3.安装......

火力全開
21分钟前
0
0
导航守卫解释与例子

“导航”表示路由正在发生改变。 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 记住...

tianyawhl
21分钟前
0
0
Java日志框架-logback配置文件多环境日志配置(开发、测试、生产)(原始解决方法)

说明:这种方式应该算是最通用的,原理是通过判断标签实现。 <!-- if-then form --> <if condition="some conditional expression"> <then> ... </then> </if> ......

浮躁的码农
35分钟前
1
0
FTP传输时的两种登录方式和区别

登录方式 匿名登录 用户名为: anonymous。 密码为:任何合法 email 地址。 授权登录 用户名为:用户在远程系统中的用户帐号。 密码为:用户在远程系统中的用户密码。 区别 匿名登录 只能访问...

寰宇01
37分钟前
0
0
plsql developer 配置监听(不安装oracle客户端)

plsql developer 配置监听(不安装oracle客户端)

微小宝
44分钟前
1
0
数据库(分库分表)中间件对比

本人的宗旨就是,能copy的,绝对不手写。 分区:对业务透明,分区只不过把存放数据的文件分成了许多小块,例如mysql中的一张表对应三个文件.MYD,MYI,frm。 根据一定的规则把数据文件(MYD)和索...

奔跑吧代码
47分钟前
2
0
Netty与Reactor模式详解

在学习Reactor模式之前,我们需要对“I/O的四种模型”以及“什么是I/O多路复用”进行简单的介绍,因为Reactor是一个使用了同步非阻塞的I/O多路复用机制的模式。 I/O的四种模型 I/0 操作 主要...

hutaishi
54分钟前
1
0
【2018.07.16学习笔记】【linux高级知识 20.16-20.19】

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

lgsxp
59分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部