给WebStorm添加FileWatcher支持Browserify

按惯例先介绍本文角色：

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

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

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

具体步骤

1. 通过 NPM 安装 Browserify

   npm install browserify -g
   

2. [Preferences] -> [Tools] -> [File Watchers]

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

   

4. 名字（Name）随便写，描述（Description）可以留空，重点是下面几项

5. FileType 选择 JavaScript

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

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

   

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. 完成！

    

小优化

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

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