How to configure source maps generated by babel?

I am depending on some module that were built with babel using --source-maps. The *.js.map files are right next to the *.js files (and idea seems to see them as they are nested in the file tree). But navigation still goes to the derived files. I don't see any settings for this. But surely idea must support using source maps.

6 comments

>The *.js.map files are right next to the *.js files (and idea seems to see them as they are nested in the file tree)

it means nothing - files are grouped by name. Patterns can be configured in Project tool window options (under the gear icon), "File nesting"

 

>But navigation still goes to the derived files.

Please can you elaborate on this? What are derived files?

Note that WebStorm doesn't (and never will) use sourcemaps for types hinting/navigation. Sourcemaps are ONLY used by debugger

0

index.js // es6
src/foo.js // es6 

dist/index.js // compiled by babel
dist/src/foo.js // compiled by babel
dist/src/foo.js.map // sourcemap created by babel

package.json: 
  ...
  main: "dist/index.js"

And yes, I do want idea to use the source map for navigation and such, not just for debugging. Is it a technical reason not to support source maps, lots of other IDEs are happy with them? 

If _never_ is _never_, I guess I will have to not pre-compile node node modules before pushing to repository and leave it to end application to do the babel transform on the fly.

0

>And yes, I do want idea to use the source map for navigation and such, not just for debugging.

 

please can you clarify what you mean? Right now, if both ES6 and generated .js files exist in the project, WebStorm normally uses the former for navigation/types resolving, and it doesn't need sourcemaps for this.

0

This is for modules reference in package.json, not the files directly contained in the idea project. The depended on module has been pre-processed by babel down to what nodejs can run, where the processed files are in the dist/ directory from above. Then in idea when I use that model and navigate to its functions idea follows the 'main' in the package.json, which in this case would be dist/index.js.

And here is where the sourcemaps come in (for the module in package.json, not the code directly in the idea project): 

dist/index.js
dist/index.js.map // this points to ../index.js, but idea does not follow that reference

...

btw, I am pre "compiling" the ES6 to nodejs' level because I have some older javascripts projects that need to use these modules.So I can't really rely on the using project to run babel at runtime. 

0

adding "jsnext:main":"path/to/your/ES6 main file" to library package.json should help - WebStorm will be using this file instead of "main"

0

Very nice! That seems to work for the first level of indirection, but not the second level. (ie, when module depends on another module). But I'm using 'npm link' to test. I'll rebuild and publish and see how that goes. 

Even so, this is an excellent solution. Thanks very very much Elena.

0

Please sign in to leave a comment.