给WebStorm添加FileWatcher支持Browserify

使用WebStorm的FileWatcher可以进行各种文件编译,除了内建类型,添加自定义类型也完全没有问题。

按惯例先介绍本文角色:

Browserify 是一款让我们在浏览器端使用require('modules')来管理模块的工具。它会分析代码中的依赖关系,然后进行编译,打包成一个文件,我们只需要在HTML中引用生成的文件即可。

WebStorm 则是JetBrains出品的开发利器,集成了各种开发工具和环境,价格不贵,速度很快,样式好看,我非常喜欢。

Browserify 也提供了个工具,叫 watchify ,可以监控文件变化,即时编译。不过我更喜欢让WebStorm帮我处理这些事情,所以小小研究了一下,配置成功。

具体步骤

  1. 通过 NPM 安装 Browserify
    npm install browserify -g
    
  2. [Preferences] -> [Tools] -> [File Watchers]

  3. 点击“+”按钮,没有内建方案,所以选择“<custom>”

    WebStorm Preferences

  4. 名字(Name)随便写,描述(Description)可以留空,重点是下面几项

  5. FileType 选择 JavaScript

  6. Scope 监控范围,内建的都不合适,所以点“…”按钮,弹出自定义的监控范围

  7. 新建一个域,名字和项目一样,好认。展开项目目录,选择存放JS文件的目录,点右侧的“Include”和“Include Recursively”将该目录下所有文件和文件夹都包含进来。OK保存。

    WebStorm Scope

  8. Program 是要执行的程序,这里自然是 Browserify,Mac下通常在/usr/local/bin/browserify

  9. Arguments 参数,参考 Browserify 的文档介绍,常规命令是

    browserify index.js -o bundle.js --debug
    

    其中 index.js 是我的入口JS,那么直接去掉 browserify 就好了。

  10. Working Directory 工作目录,点击右侧的“Insert Macros”按钮,选择 “$ProjectFileDir$”。后面接上目录“/js/”。

  11. 完成!

    WebStorm Browserify File Watcher

小优化

  1. 前面我们设置监控范围的时候比较粗放,这样生成 bundle.js 之后会再跑一遍,有点不爽,所以图中我把 bundle.js 过滤掉了

  2. 确保这个File Watcher正常工作后,可以去把 Show console 设置成Never,这样在编辑到一半的时候就不会有错误提示了。