Home

Browserify + coffeeify 的前端调试方案

文章原在 coffee-js/Languages 的 Issues 里边, 转移过来
https://github.com/coffee-js/languages/issues/5

SPM 更新

开头还是留给 spm2 发布的广告, 期待能快壮大起来
同时 CDN 也提前放出来, 尽管和 spmjs 源是分开的, 还是觉得挺有意思
我觉得编程就应该更简单, 因此对 CommonJS 语法的喜爱远胜 AMD
SeaJS 的语法不错... 可惜种种原因我个人做玩具首选 Browserify 了

Browserify

Browserify 看这里, 按描述上它是用 Node 自身的模块机制来加载模块的
模块编译成一个比如 build.js 文件, 浏览器这样只要一个 JS 文件较好了
和 Component 项目的不同是这里用的 Node 模块, 而不是另外的办法

使用时要用 browserify main.js > bundle.js 这样的命令进行一次编译
main.jsrequire 的其他文件, 会被自动加载过来, 打包到 bundle.js
browserify 命令有更多的参数, 具体就看 README 的说明了
除了 NPM 上安装的模块, 部分 Node 官方模块按文档有浏览器版本直接可用
注意的是 watch 命令在某个版本移除了, 不知什么时候回来

重要的一点是 SourceMap 支持, Component 文档里就没说
Browserify 似乎是一个月前有的 SourceMap 支持, 这以后意义就不同了
加上 -d 参数, 生成的 .js 脚本就一段 dataURL 形式的 sourceURL 注释
注意开启 Chrome 调试工具的 Enable SourceMap 选项, 然后开始吧

coffeeify

Browserify 支持一些插件, 可以把其他代码编译到 JS 当中去
对我来说, 主要就是 coffeeify 了, 支持 CoffeeScript 的插件
不过现在几个不好, 一个是[模块需要在本地安装才行, 否则会报错]
还有是[需要 .coffee 后缀写好, Browerify 才能识别], 而不像 Node 中那样
另外目前有行号的 bug, 在当前的 coffee v1.6.2 版本中会出错
不过按链接说的, 其实 bug 已经修复, 手动才 Github 下载模块替换是可以解决的

这样就能在 Chrome 终端直接看 .coffee 代码了, 第一次单步调试 coffee :sparkling_heart:
不太好的是 @substack 大神本人不写 coffee, README 有提到
另外写 coffee 的倒是有 commonjs-everywhere 作者写出来东西
后者, 上次我尝试了没能玩转, 只好往后更新出来的详细文档了, 期待啊

我的尝试

我的 snowflake 是对此的一个尝试吧, 昨晚调试行号我没调整好的
感觉轻松多... 不过外部模块调用我没尝试, 到时也许有些问题, 再看
另外我的自动编译和浏览器刷新, browserifywatch 参数没好, 绕了点弯子
但以后, 保存代码, 浏览器自动刷新那是必须, 必须把工具做好

asm.js

跑题... ASM 的速度好快, JS 编译都常态啊. 各种编译
http://blog.skeeterhouse.com/9032.html
http://kripken.github.com/mloc_emscripten_talk/#/
http://asmjs.org/faq.html


近几天看了下 commonjs-everywhere 的用法, 觉得可以考虑尝试了
https://github.com/michaelficarra/commonjs-everywhere
相对于 browserify 来说的确有一些难得的优点:

麻烦当然有还不少:

相对来说我探索的还太少, cjsify 是暴露 AST 的, 信息量更多
话说回来这名字取得, 其实也是 browserify 的一个相似方案
很多模块应该也是可一样 require 的, 以后再看吧

comments powered by Disqus