Create a gist now

Instantly share code, notes, and snippets.

@cheery /
Last active Aug 29, 2015

Source Maps and Coffeescript Modules

Source Maps and Coffeescript Modules

In these files, the browser compiles and loads the coffee-script code, with a module system provided by the bootloader in main.js.

The source maps in this gist are not working. They are giving me line after the source of the logging in Chrome 33. In firefox 27, it doesn't seem to work at all.

I would like you to solve a problem for me: Figure out how to get the source maps working in this setting. Provide an option for embedding the source along the source map and the code. Provide way to specify a source URL, to make it easier to locate the module.

As a reward, you are making client-side browser development bit less intimidating.


  • Git clone this gist
  • Reach your coffee-script.js:
mkdir lib
pushd lib
  • Compile the
coffee -c
  • Start up some temporary server
python -m SimpleHTTPServer
  • Browse to the page and check the source maps in the inspector to see what is output.
  • Solve the problem!

PS. The module loader needs to be customizable. One solution never fits everybody.

PS. PS. The eval doesn't work here. It penalizes in performance.

console.log "hello"
require "assistance!"
console.log "world"
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>SourceMaps and Coffeescript Modules</title>
<script src="lib/coffee-script.js"></script>
<script src="main.js"></script>
window.addEventListener 'load', () ->
console.log 'hello'
sourceURL = ''
wget sourceURL, (source) -> runModule source, {sourceURL}
runModule = (source, options={}) ->
require = (text) ->
console.log 'require', text
module = {loaded:false}
if true
js = compileWithSourceMaps(source, options.sourceURL)
js = CoffeeScript.compile source, bare:true
Function("require", "module", js)(require, module)
module.loaded = true
return module
compileWithSourceMaps = (source, sourceURL) ->
if btoa? and JSON? and unescape? and encodeURIComponent?
options = {
bare: true
sourceMap: true
inline: true
{js, v3SourceMap} = CoffeeScript.compile source, options
js = "#{js}\n//# sourceMappingURL=data:application/json;base64,#{btoa unescape encodeURIComponent v3SourceMap}\n//# sourceURL=#{sourceURL}"
js = CoffeeScript.compile source, bare:true
return js
wget = (url, success) ->
xhr = new XMLHttpRequest()'GET', url, true)
xhr.responseType = 'text'
xhr.onload = () ->
if @status == 200
success @response
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment