geekwen.com

用 webstorm 开发 Node.js 项目

Webstorm 是个很强大的工具,对前端开发中很多工具做了非常棒的集成。通过对 Node.js 项目开发的介绍,希望让还未接触webstorm的同学对它有所认识;也希望跟已经接触了 Webstorm 的同学交流交流我的使用经验。废话不多说,直接上干粮😎。

1、用git工具获取项目源代码

打开webstorm,选择“Check out from Version Control”,选择git(如下图)。

在弹出的窗口中填入相关地址(在这之前需要先配置好SSH Keys):

  • Git Repository URL:git 仓库地址;
  • Parent Directory:需要拷贝到本地哪个目录;
  • Directory Name:文件夹名称

点击clone即可将代码下载本地。

2、模块安装

clone node项目后第一件事:打开右下角terminal,输入npm install安装node模块。如果package.json在某个子目录,那么需要先cd到该子目录,再运行npm install

3、配置目录以及scope

说scope之前,先看看我们工作目录。就拿我一个项目的目录为例子吧。

common/config/controller都是Node端的代码,views中是前端页面的代码,node_modules就是我们node模块了。

日常开发中,node_modules并非我们工作目录,所以这个目录不需要检索也不需要同步,即可以将它在项目工程中排除。右键点击该目录选择mark directory as: excluded。

这样node_module目录就排除在项目外了。使用全局搜索,浏览todo等功能时就不会用到这里面的内容了。

scope简单说就是个过滤器。在find in path(目录搜索)、todo等功能中能够通过scope对指定的目录/文件进行操作。比如说:我想搜索node端某个模块在那几个文件引用了;在前端有哪些todo项目等等。那么到底怎么设置呢,看下图:

打开preferences选择到scopes,就可以看到scopes的管理。加号添加一个新的scope,减号是删除某个scope。选择某个scope可以查看、修改该scope的配置。下面解释一下各个条目:

  • Name:就是该scope的名称啦,方便使用时对具体的某个scope进行选择;
  • Pattern:过滤模式。这个一般不用管,webstorm会自动生成;

然后下面就是整个目录了,右边有几个按钮:

  • include:包括该目录(不包括子目录)或者文件
  • include recursively:包括该目录下所有内容以及子内容
  • exclude:排除该目录(但不排除子目录)或者文件
  • exclude recursively:排除该目录以及所有子内容

弄清楚这些就很简单了。

比如我想创建一个node端代码的scope,就只需要包含common/config/controller目录所有内容(include recursively)ok了。

然后中间那里有一行:scope contains 69 of total 1,247 files(Non-project files are not shown)。这个是说:整个项目一共有1247个文件,当前scope选中了69个文件(非项目文件没有包括在其中,也就是我们之前排除的node_module没有在统计之内)

配置好后,我们就可以使用了!

比如在todo中:

选择scope based(通过scope过滤),选择Node JS就能查看node端所有的todo项目了。

再比如:在find in path中:

在 scope 处选择 Node.js 就能查看哪些文件引用了config模块。

灵活运用 scope 能够对开发起到非常大的帮助。

4、node运行

tips:建议类 unix 类型的操作系统安装nvm来管理nodejs

打开Preferences,如下图选择到Node.js and NPM。

在Node interpreter中选择node的路径(或者说需要运行的版本,一般默认就会读取到系统上安装的所有版本)。这样在之后配置node运行时就能用指定的node版本运行我们的程序了。

然后enable下面的Node.js Core library。这样再之后require模块时,webstorm能够自动填充/识别你需要的模块。点击ok,完成并关闭设置面板。

上面操作完后,接下来就可以配置程序运行的配置了。在右上角选择:edit configurations

然后在弹出框中,点击加号选择Node.js:

name就是该配置的一个命名。也就是说你可以配置很多方式,给个命名用以区分。

在node interpreter中会默认选择之前我们配置好的node版本,后面会有个Project字样。当然,如果想用其他版本,这里也可以自行选择。

下面的node parameters是指node运行参数,这个根据需要进行配置。

working directory是指package.json所在目录。

javascript file就是整个程序的入口。

点击ok然后就可以了。

使用方式还是在右上角那里:选择刚才创建的node,然后点击三角形就可以运行node程序了。在最开始的地方会显示当前运行的哪个node环境:

另外,左侧webstorm会自动识别npm scripts,双击即可执行。如果不喜欢前面介绍的运行方式,也可以在这里配置node运行脚本。配置一个"start": "node entry.js"。但是需要注意的是,这里的配置都是在terminal中执行的,也就是说terminal(全局环境中)是用的什么node版本,node entry.js就会使用哪个版本,而不是webstorm中设置的版本(除非你默认的都是一个版本)。区分这一点很重要。

5、node调试

调试首先要打断点,在需要的地方点击行号(没有行号?在编辑器左边灰色区域右键,然后选择:show line numbers)后面的灰色空白就可以放置一个断点(再次点击红点即可取消断点)。

然后在webstorm右上角Node tools一栏中(上面有图):三角形是正常运行,旁边的那只虫(bug),就是debug调试了。

运行到断点处时,程序会自动暂停,并会从浏览器跳转至webstorm。在debug中就能看到相关信息了。左侧一竖排按钮是进行一些相关操作。

tips:在favorites中,还能够看到整个项目中设置好的断点,能够快速定位、管理已设置的断点。

6、git代码提交/建立分支/合并分支

代码写好后,就可以提交了,右上角Node运行工具的旁边就是git的相关操作:提交(上箭头),同步(下箭头),查看历史,回退。

右下角是分支的管理:

这里可以管理本地和远程仓库中的分支:可以进行新建、切换、合并、删除等操作。都很直观,比较简单。操作时注意下以下面几点:

  • 切换分支前,建议先提交当前分支的改动然后再切换。因为如果没有提交的话,那么改动会带到切换到的分支;
  • 合并分支时:假设是我们需要将B分支,合并到A分支,那么需要先切换到A分支,然后在右下角的分支管理处选择B分支,点击菜单中的Merge就好了。别弄反了。

7、代码部署/服务器管理

最后就是代码部署了。打开preferences,选择deployment如下图:

点击加号添加新的配置。各字段都很直观。Root path是指服务器上对应的node项目目录。tab标签处excluded paths中,可以配置一些不需要同步的目录。

配置好后,在左侧Project中,右键点击需要跟服务器同步的目录/文件:

可以直接上传到服务器(upload to xxx),还可以跟服务器进行对比sync with xxxx,对比的窗口如下图所示:

左边是本地文件,右边是服务器上的文件。所以,向右的蓝色箭头表示从本地上传到服务器,向左的绿色箭头表示从服务器下载到本地。如果需要修改操作可以在箭头上点击右键进行修改。下边是代码对比(可耻的打了码)。

顶部有一排工作栏,鼠标移上去会有名称,也很直观。就不一一描述了。

除了在project中可以操作外,任意文件中右键也可以操作当前文件。

另外在菜单栏tools -> deployment 中还有更多的选项,比如:browse remote host - 查看远程服务器的文件。

除了上传文件,当然还得ssh登录服务器。因为改动了node端代码后,需要重启服务器上的node程序。也是在菜单栏tools中,有个start ssh session:

如果已经配置的话(默认应该会有前面deployment server中配置好的),可以在弹出框中选择,如果要新建的话,则选择:edit credentials。字段很简单,照样填写就行了。

在列表中选择某个服务器后,会自动在右下角termial中新建个session链接服务器。这样就可以去重启node应用了!

写到这里整个流程就大概梳理完了。希望对读者有所帮助。

8、一些感受

开发工具从来都是开发者们津津乐道的话题。我用过也不少,最开始接触前端的时候是用的Nodepad++(甚至记事本,哈哈),后来转到sublime,也试用过一段时间vim,atom和brackets,最终在webstorm上安定了下来。每个工具都有它的优点缺点,每个人的需求喜好也不一样。对我而言,webstorm是再合适不过的一款工具。我是个懒人,不大喜欢折腾文件配置、插件配置,webstorm就给我提供了一个一站式的“服务”。我所需要的功能它都有,只需要简单的配置就能够运做起来,并且它也是跨平台的(macOS,Linux,windows都有)!

曾几何时,我也算是个勤快人。折腾过一段时间的vim,用了几个月,配置各种插件,感觉到vim确实是个神器,极客范十足。然而能力有限,无法完全驾驭它。折腾几个月,虽然用着还不错但是远还没有达到非常顺手的地步,遂就放弃了。后来转到了sublime上面。sublime虽然非常的简洁,但它所具备的功能是很强大的!通过配置插件,能够完成许许多多的事情。一段时间用得非常舒服。后来经过同事介绍了解到jetbrain,用了段时间phpstorm(同事是写php的),感觉不错,遂装了webstorm正式开始用起来。这一用就是2年了。

webstorm有很多非常不错的功能,需要不断的挖掘、学习。在我使用期间,经常隔段时间就会发现一个新的窍门,能够快速解决之前很繁杂的操作。webstorm如果利用得好,对开发的帮助非常大。以后有时间写一篇零碎的小技巧总结。