How to enable sourcemaps with grunt, browserify, and babelify

Question

I'd like to generate sourcemaps for jsx files that are transpiled with babelify and browserify. It seems that some sourcemaps are being generated as a base64 encoded comment at the bottom of my output file, but stacktraces do not honor them.

My grunt task looks like the following:

browserify: {
  options: {
    browserifyOptions: {
      debug: true
    },
    debug: true,
    transform: ['babelify']
  },
  app: {
    src: 'src/app.jsx',
    dest: 'dist/app.js'
  }
},

score 9 · Answer 1 · answered Jul 07 '15 at 18:42

This works for me:

browserify: {
    dev: {
        options: {
            browserifyOptions: {
                debug: true
            },
            transform: [["babelify"]]
        },
        files: {
            "dist/bundle.js": "src/index.js"
        }
    }
},

score 4 · Answer 2 · answered Apr 29 '16 at 19:39

Going to need to use grunt-exorcise to extract the map from the bundle.

Browserify recommends it

browserify: {
  options: {
    browserifyOptions: {
      debug: true
    },
    debug: true,
    transform: ['babelify']
  },
  app: {
    src: 'src/app.jsx',
    dest: 'dist/app.js'
  }
},
exorcise: {
    app: {
       options: {},
       files: {
          'dist/app.js.map':['dist/app.js'],
       }
    }
},

How to enable sourcemaps with grunt, browserify, and babelify

2 Answers2