browserify v2 adds source maps

[thlorenz]

Please leave comments regarding browserify v2 adds source maps post here.

[AnnieCyl]

I've posted a problem about --debug here:
browserify/browserify#753
Have any idea?

[thlorenz]

I have no idea why that happens.
Lets keep this issue in browserify though since more people will see it there and hopefully a fix can be found.

[tad-lispy]

Hi.

Thanks for your work. Browserify is soo cool and with source maps it's going to be even better. Unfortunately I can't get it working for me with regards to coffee script and source maps.

My setup is as follows.

I have a bunch of coffee scripts to be run on frontend in src/scripts. I compile them using standard coffee CLI tool to lib/scripts with source maps in .map files. Then on application init I bundle them with browserify API and serve this from memory.

AFAIK browserify doesn't support external source maps, so I wrote a simple transform function to embed them (make them inline):

convert = require "convert-source-map"

js = '' # Bundled code will be here

scripts = do require "browserify"
scripts
  .add require.resolve "../../lib/scripts/index"
  .transform (file) ->
    code  = ''
    write = (chunk) -> code += chunk
    end   = ->
      code = code.replace convert.mapFileCommentRegex, (match) ->
        sourcemap = convert.fromMapFileComment match, path.dirname file
        return sourcemap.toComment()

      @queue code
      @queue null

    return through write, end

  .bundle debug: true, (error, code) ->
    if error then throw error
    js = code

Given example coffee script src/scripts/index.coffee:

console.log "Hey ho!"

what I get in js variable is:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
// Generated by CoffeeScript 1.7.1
(function() {
  console.log("Hey ho!");

}).call(this);



},{}]},{},[1])
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2VuZXJhdGVkLmpzIiwic291cmNlcyI6WyIvaG9tZS90YWRldXN6L1Byb2plY3RzL2RyZWRkL25vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCIvaG9tZS90YWRldXN6L1Byb2plY3RzL2RyZWRkL2xpYi9zY3JpcHRzL2luZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FDQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiBlKHQsbixyKXtmdW5jdGlvbiBzKG8sdSl7aWYoIW5bb10pe2lmKCF0W29dKXt2YXIgYT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2lmKCF1JiZhKXJldHVybiBhKG8sITApO2lmKGkpcmV0dXJuIGkobywhMCk7dGhyb3cgbmV3IEVycm9yKFwiQ2Fubm90IGZpbmQgbW9kdWxlICdcIitvK1wiJ1wiKX12YXIgZj1uW29dPXtleHBvcnRzOnt9fTt0W29dWzBdLmNhbGwoZi5leHBvcnRzLGZ1bmN0aW9uKGUpe3ZhciBuPXRbb11bMV1bZV07cmV0dXJuIHMobj9uOmUpfSxmLGYuZXhwb3J0cyxlLHQsbixyKX1yZXR1cm4gbltvXS5leHBvcnRzfXZhciBpPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7Zm9yKHZhciBvPTA7bzxyLmxlbmd0aDtvKyspcyhyW29dKTtyZXR1cm4gc30pIiwiLy8gR2VuZXJhdGVkIGJ5IENvZmZlZVNjcmlwdCAxLjcuMVxuKGZ1bmN0aW9uKCkge1xuICBjb25zb2xlLmxvZyhcIkhleSBobyFcIik7XG5cbn0pLmNhbGwodGhpcyk7XG5cbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWRhdGE6YXBwbGljYXRpb24vanNvbjtiYXNlNjQsZXlKMlpYSnphVzl1SWpvekxDSm1hV3hsSWpvaWFXNWtaWGd1YW5NaUxDSnpiM1Z5WTJWU2IyOTBJam9pTGk0dkxpNGlMQ0p6YjNWeVkyVnpJanBiSW5OeVl5OXpZM0pwY0hSekwybHVaR1Y0TG1OdlptWmxaU0pkTENKdVlXMWxjeUk2VzEwc0ltMWhjSEJwYm1keklqb2lPMEZCZVVKQk8wRkJRVUVzUlVGQlFTeFBRVUZQTEVOQlFVTXNSMEZCVWl4RFFVRlpMRk5CUVZvc1EwRkJRU3hEUVVGQk8wRkJRVUVpZlE9PVxuIl19

Decoded and pretty printed body portion of sourceMappingURL is:

{
  "version": 3,
  "file": "generated.js",
  "sources": [
    "/home/tadeusz/Projects/dredd/node_modules/browserify/node_modules/browser-pack/_prelude.js",
    "/home/tadeusz/Projects/dredd/lib/scripts/index.js"
  ],
  "names": [],
  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
  "sourcesContent": [
    "(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error(\"Cannot find module '\"+o+\"'\")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})",
    "// Generated by CoffeeScript 1.7.1\n(function() {\n  console.log(\"Hey ho!\");\n\n}).call(this);\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiLi4vLi4iLCJzb3VyY2VzIjpbInNyYy9zY3JpcHRzL2luZGV4LmNvZmZlZSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBeUJBO0FBQUEsRUFBQSxPQUFPLENBQUMsR0FBUixDQUFZLFNBQVosQ0FBQSxDQUFBO0FBQUEifQ==\n"
  ]
}

So I get mapping for the compiled JS file, which contains mapping to the coffee. But I was hoping to get a mapping to the original coffee source. Is that possible?

[thlorenz]

Please keep these issues (i.e. not comments) in the browserify repo.
This thread is created for comments on the blog post only.

However @lzrski have a look at coffeeify or caching coffeeify.
Both ensure to compile your coffee script with source maps enabled which then get preserved by browserify.

[tad-lispy]

I did as you suggested. Works great. Thanks.