Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enable sourcemaps with grunt, browserify, and babelify

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'
  }
},
like image 900
Jim Geurts Avatar asked Jun 23 '15 20:06

Jim Geurts


2 Answers

This works for me:

browserify: {
    dev: {
        options: {
            browserifyOptions: {
                debug: true
            },
            transform: [["babelify"]]
        },
        files: {
            "dist/bundle.js": "src/index.js"
        }
    }
},
like image 96
Chris Coniglio Avatar answered Nov 11 '22 04:11

Chris Coniglio


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'],
       }
    }
},
like image 40
ordepim Avatar answered Nov 11 '22 03:11

ordepim