Using source maps when generating ES5 code from ES6 has proved to be very helpful in my development. When debugging I want errors to reference the source files not the generated files. I use babel to generate ES5 code from ES6 and source-map files. I also use source-map-support for referencing stack traces in the source file.
For this example I’ll create a simple ES6 class that extends EventEmitter and will emit a success event. I’ll purposely misspell the word emit and check if the error references the source file.
My ES6 files will be in a directory named lib. The generated ES5 and source map files will be in a directory named dist.
In my ES6 class I need to include the source-map-support library and call its install() in the construtor.
Here is the ES6 class:
Here is the entry point that uses the EmitStuff class I created. It uses the ES5 generated file.
Here is the build step that will generate ES5 code and source-map files into the dist directory from the ES6 code in the lib directory.
Now when I run my entry point file I get the following:
The error points to the source file!
I created a github repo, source-maps-with-node for this example.