【翻译】CoffeeScript Source Maps

by island205

at 2012-10-23 16:09:19

original http://island205.com/2012/10/23/%e3%80%90%e7%bf%bb%e8%af%91%e3%80%91coffeescript-source-maps/

Michael Ficarra创建的“better CoffeeScript compiler”的kickstarter很成功，而且现在还反馈了一个巨大的红利支持者——source maps，CoffeeScript调试，作为不把CoffeeScript用在浏览器中最流行也是最强的反对意见，现在已经解决90%了。

安装CoffeeScriptRedux

从Github上把它clone下来：

    $ git clone git://github.com/michaelficarra/CoffeeScriptRedux.git

安装依赖：

    $ cd CoffeeScriptRedux
    $ make deps

运行测试，保证没啥问题：

    $make test

把你的文件编译为JS吧

CoffeeScriptRedux没有使用与CofffeeScript一样的接口，所以可能这会与你使用的稍微有点不一样。

从CoffeeScriptRedux目录开始：

    $ ./bin/coffee --js -i /path/to/test.coffee

这会创建一个文件：/path/to/test.js。

创建Source Map文件

    $ ./bin/coffee --source-map -i /path/to/test.coffee > /path/to/test.js.map

为了干成这事，我不得不安装了source-map：

    $ npm install source-map

把Source Map告诉浏览器

你需要告诉浏览器source map文件在哪里，可以往文件里添加一行注释，你可以编辑test.js，或者直接运行：

    $ (echo; echo '//@ sourceMappingURL=test.js.map') >> /path/to/test.js

打开Chrome开启Source Map功能

打开控制台，点击右边的齿轮按钮，勾选“Enable Source Maps”。

chrome

“That’s it!”

打开一个带有test.js的页面，查看web inspector的“Sources”，你的CoffeeScript就在那里，你可以设置断点，鼠标划过变量能够看到它们的值（译者：噢噢噢噢），诸如此类！

下面是一个我故意打破映射的实现：

下载示例文件

map

那，那10%没有解决的是什么？

就是，你无法在console中直接输入CoffeeScript。这里有一个CoffeeConsole chrome插件，但是在断点的地方它什么都不知道啊。（译者：说不准可以使用：//@sourceUrl=<path>解决？）

Google Reader