WebStorm里配置Browserify自动编译

Browserify Logo

Browserify

Browserify是个好东西,相比requireJS seaJS 他配合Script的async属性去实现“模块化、异步、非阻塞”可以说是“Drop Dead Simple”,简单高效又直接。自从他添加了sourcemap功能后,chrome里调试起来简直如鱼得水,越发喜欢了。

但是它本身是一个Compiler,不是一个JS框架。每次修改模块都需要重新执行一次browserify命令,相当麻烦。

我这里来介绍下WebStorm里的配置,以让Browserify自动化。

如果你用过sass或coffescript或dart,你对WebStorm的FileWatcher肯定印象深刻。

先看下一般的目录结构:

目录结构

目录结构

如上图,myModule是我们的自己的模块文件夹;main.js是Browserify的入口文件;bundle.js自然就是生成出来的最终要放在页面上的JS文件拉!

开始配置,全程图形化,请放心!
第一步:打开settings(Ctrl+Alt+S),找到”File Watchers” ,然后添加一个自定义watcher(如下图);
File Watchers

第二步:
Name就起名”Browserify吧”;
Description随便写;
FileType选“JavaScript”;
Scope点开来,点加号,找到我们要监视的文件夹,即mymodule文件夹,选中后点“Include”,点ok(如下图);
Scope
Program为Browserify的可执行cmd脚本文件,路径应该是类似图示那样的(记得替换用户名);
Arguments:照着写,加“–debug”是为了生成sourcemap以方便调试
Working directory: 点Insert macro,然后插入$FileDir$
其他的随便写,最终完成的如图所示:

Browserify FileWatcher

Browserify FileWatcher

完成后,我们修改myModule里的文件,再保存的时候WebStorm就会重新生成一遍bundle.js了

重要注意:不能让bundle.js存在于Scope里(第二步),否则在文件修改的时候,bundle也被修改,于是触发了死循环,会无限生成下去。
其他自动生成工具推荐Grunt-Browserify,我没用过,听说不错。

《WebStorm里配置Browserify自动编译》有11个想法

  1. 你好,我用 webstorm 配置生成的 bundle.js 时提示“Uncaught ReferenceError: require is not defined ” 。
    然后我用命令行生成 bundle.js 比较了以后发现,webstorm 配置生成的 bundle.js 文件头上少了 “require=”,如图所示。难道在网页中引用 webstorm 配置生成的 bundle.js 不能 require()?

    1. 补充说明一下,我的命令行是有用 `-r` 的:
      `browserify -r ./main.js -o bundle.js –debug`

      但是你的 webstorm 配置里面没有`-r`,我试着在 webstorm 配置里面也用上面这个命令行,但是发现 webstrom 会一直在编译:

      1. 看下文章结尾的黄字“重要注意”。是不是进入死循环了?

        1. 我的文件结构跟你是一样的。

          使用命令:`main.js -o ../bundle.js `,可以自动编译生成bundle.js,只是bundle.js头部没有`require=(`,所以我在html中引用这个bundle.js的话,不能用require()方法获取模块。

          我将命令换成:`-r main.js -o ../bundle.js`,会提示找不到main.js文件。

          于是我将命令换成:`-r ./main.js -o ../bundle.js `,就出现上面一直编译的问题了。

          1. 我专门建了个工程,文件结构和File Watcher全部按照你的来设置了,可是browserfiy还是一直处于下图中的状态。难道这个跟系统或者webstorm的版本有关?我是win8 64位系统,webstorm是8.0.2版本的。

          2. 换了台机子试了下,果然没问题了。
            看来是我的系统问题了。
            居然被这个问题瞎折腾了这么久。。。还一直以为是webstorm或者是browserify的问题。。。

          3. 好吧,最终确定是browserify版本的问题。
            我在我的机子上重新安装了下browserify就可以了。

  2. Asking my step-father (who is a Celts fan, but a nice one; he likes the Lakers) why AC Green get soooo many rebounds not even being that tall. His reh#:nseo&p8220;Tse ball likes him”

发表评论

电子邮件地址不会被公开。