山维空间

标签： webstorm

  • 使用 Webstorm 调试 Electron 主进程

    使用 Webstorm 调试 Electron 主进程

    图文无关，我什么时候拍了这条龙卷风的……

    需要调试 Electron 主进程，按照 Webstorm 官方博客的设置，不行，报错。

    错误信息

    仔细看错误信息，因为我需要在工作目录下写文件，看起来在这样的执行语句下，会把工作目录定到 Electron 的安装目录里。

    不过我直接在命令行里执行 electron . 是可以的，猜测可能跟入口 js 有关，所以把“JavaScript file”删掉，然后在“Node parameters”里填上 .（或者项目绝对路径），尽量贴近命令行里的状况，就可以了。

    可行的配置

  • 给WebStorm添加FileWatcher支持Browserify

    给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>”

      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，这样在编辑到一半的时候就不会有错误提示了。