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(如下图);
第二步:
Name就起名”Browserify吧”;
Description随便写;
FileType选“JavaScript”;
Scope点开来,点加号,找到我们要监视的文件夹,即mymodule文件夹,选中后点“Include”,点ok(如下图);
Program为Browserify的可执行cmd脚本文件,路径应该是类似图示那样的(记得替换用户名);
Arguments:照着写,加“–debug”是为了生成sourcemap以方便调试
Working directory: 点Insert macro,然后插入$FileDir$
其他的随便写,最终完成的如图所示:
完成后,我们修改myModule里的文件,再保存的时候WebStorm就会重新生成一遍bundle.js了
重要注意:不能让bundle.js存在于Scope里(第二步),否则在文件修改的时候,bundle也被修改,于是触发了死循环,会无限生成下去。
其他自动生成工具推荐Grunt-Browserify,我没用过,听说不错。
你好,我用 webstorm 配置生成的 bundle.js 时提示“Uncaught ReferenceError: require is not defined ” 。
然后我用命令行生成 bundle.js 比较了以后发现,webstorm 配置生成的 bundle.js 文件头上少了 “require=”,如图所示。难道在网页中引用 webstorm 配置生成的 bundle.js 不能 require()?
补充说明一下,我的命令行是有用 `-r` 的:
`browserify -r ./main.js -o bundle.js –debug`
但是你的 webstorm 配置里面没有`-r`,我试着在 webstorm 配置里面也用上面这个命令行,但是发现 webstrom 会一直在编译:
看下文章结尾的黄字“重要注意”。是不是进入死循环了?
我的文件结构跟你是一样的。
使用命令:`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 `,就出现上面一直编译的问题了。
根据文档 https://github.com/substack/node-browserify#external-requires 你需要用冒号指定模块名。我调成-r 模式,没什么问题。你看下
我专门建了个工程,文件结构和File Watcher全部按照你的来设置了,可是browserfiy还是一直处于下图中的状态。难道这个跟系统或者webstorm的版本有关?我是win8 64位系统,webstorm是8.0.2版本的。
换了台机子试了下,果然没问题了。
看来是我的系统问题了。
居然被这个问题瞎折腾了这么久。。。还一直以为是webstorm或者是browserify的问题。。。
好吧,最终确定是browserify版本的问题。
我在我的机子上重新安装了下browserify就可以了。
browserify怎么安装啊
请问一下,browserify编译运行,后怎么调试代码?
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”