New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: source map support #68

Closed
jellevandenhooff opened this Issue Dec 7, 2017 · 32 comments

Comments

Projects
None yet
@jellevandenhooff

jellevandenhooff commented Dec 7, 2017

It would be great if parcel managed source maps.

@davidnagli

This comment has been minimized.

Member

davidnagli commented Dec 7, 2017

Would we only need source maps for JavaScript files?

@stephen

This comment has been minimized.

stephen commented Dec 7, 2017

Sourcemaps for all types (i.e. css) seem nice.

@devongovett

This comment has been minimized.

Member

devongovett commented Dec 7, 2017

There are many problems with source maps as they exist currently. I haven't yet found a solution that works well anywhere, so open to suggestions here.

Problems I have found:

  • They are very slow to generate.
  • They are very slow to load in browsers.
  • They don't really help with debugging - variables are still potentially renamed in the debugger. You still end up looking at the compiled source anyway. They basically only help with stack traces.

That being said, I would love to be proven wrong here!

@spalger

This comment has been minimized.

Contributor

spalger commented Dec 7, 2017

I mostly agree, but I think that something along the lines of webpack's cheap-source-map devtool offers a good compromise.

  • It's faster than standard source maps
  • Shows the compiled source
  • Helps browsers with stack traces, remap breakpoints after a bundle is rebuilt, and supports cmd+p for finding code by file name.

I've been only been using parcel for a couple days and have groaned more than a couple times because my breakpoints got all jumbled up, or because I tried to use cmd+p and thought "am I not importing that module?".

@jellevandenhooff

This comment has been minimized.

jellevandenhooff commented Dec 7, 2017

I've found source maps invaluable in debugging hairy stack traces.

Re. compile speed: The impact on code generation and asset transformation can be fairly large as the output might double size. However, with parcel's asset cache that should be a one-time cost for most files. The other impact is bundling, which I think means concatenating the input source maps and seems cheap enough based on my read of the source map spec (https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#).

@jamiebuilds

This comment has been minimized.

Member

jamiebuilds commented Dec 7, 2017

@jasonLaster You were talking about some improvements to source maps the other day. Is there any work you can point to?

@devongovett

This comment has been minimized.

Member

devongovett commented Dec 7, 2017

The facebook metro bundler team just extracted their source map generator into a separate module https://npmjs.com/metro-source-map thanks to @cpojer. Here's an article about how it is works https://medium.com/@david.aurelio/medium-fast-source-map-generation-for-react-native-ea5549007c18

Perhaps we can use that?

bors bot added a commit to jser/jser.github.io that referenced this issue Dec 11, 2017

Merge #466
466: 2017-12-11 JS: Parcel、webpack 4.0.0α、Node.js Performance r=azu a=azu

- [📦 Parcel](https://parceljs.org/ "📦 Parcel")
- [🚀 Announcing Parcel: A blazing fast, zero configuration web application bundler 📦](https://hackernoon.com/announcing-parcel-a-blazing-fast-zero-configuration-web-application-bundler-feac43aac0f1)
- [🔌 Plugins](https://parceljs.org/plugins.html)
- Benchmark issue
  - [Publish benchmarks app · Issue #9 · parcel-bundler/parcel](parcel-bundler/parcel#9)
  - [Feature request: source map support · Issue #68 · parcel-bundler/parcel](parcel-bundler/parcel#68)
- [webpack 4.0.0-alpha.0 feedback · Issue #6064 · webpack/webpack](webpack/webpack#6064)
  - [Vote](https://webpack.js.org/vote/)
  - [Sean Thomas Larkin on Twitter: "Alright #JavaScript #webpack folks, I've created the voting item! If you _really_ want a Zero Configuration (aka your configs live in .pos… https://t.co/w5WE8T0I0J"](https://twitter.com/TheLarkInn/status/938928029044170752)
- [Node.js Performance 改善ガイド - from scratch](http://yosuke-furukawa.hatenablog.com/entry/2017/12/05/125517)
@brandon93s

This comment has been minimized.

Member

brandon93s commented Dec 14, 2017

They don't really help with debugging - variables are still potentially renamed in the debugger. You still end up looking at the compiled source anyway. They basically only help with stack traces.

In production, "only the stack trace" can be incredibly valuable when you're unsure what's happening!

@devongovett

This comment has been minimized.

Member

devongovett commented Dec 14, 2017

Unfortunately the Facebook library is licensed under BSD+PATENTS. I've asked @cpojer to look into getting that relicensed so we can use it, but no promises.

@cpojer

This comment has been minimized.

cpojer commented Dec 14, 2017

This process will likely take a while.

@StarpTech

This comment has been minimized.

Contributor

StarpTech commented Dec 16, 2017

e.g Brunch is very similiar to parcel and has source map support builtin and it's really fast. Perhaps it can help by searching for a solution. In my opinion sourcemap support is essential to provide a great dev experience. If you compile single-file components ... and your debugger jumps into the glory it's frustrating💃

@enrichit

This comment has been minimized.

enrichit commented Dec 18, 2017

I have to agree on this one, I would like to help but my area of experise doesn't really go into how all these tools work internally.

Yes, the variables when it comes to Javascript do get renamed which can be frustrating but you can still step through; and chrome (the new FF seems a little iffy for me right now) can handle the scope variables in both the source view tooltips and the tree view. Really the only areas where it's lacking are the console and watch panels, after a while you learn workarounds for those too.

Then you have CSS source maps where you have none of these problems.

The main thing is actually stack traces, error logs and stepping through, without those three things I would rather wrestle with webpack for a couple of hours and spend a few hours hear and there helping my team out with thier requests.

@tkivela

This comment has been minimized.

tkivela commented Dec 19, 2017

If speed for creating sourcemaps is an issue, I recommend that sourcemap creation is optional (with default value off/false), that way the performance with current bundling processes should stay the same but if sourcemaps are needed then they could be turned on.

@danieltodonnell

This comment has been minimized.

danieltodonnell commented Dec 19, 2017

sourcemaps and stack tracing are essential to any professional js developer.

if you are concerned about performance then make it optional, but I know its a deal breaker for a lot of dev teams. It would be the main reason my team wont use it.

@spalger

This comment has been minimized.

Contributor

spalger commented Dec 19, 2017

It's the main reason I've stopped using Parcel

@kvnlnt

This comment has been minimized.

kvnlnt commented Dec 19, 2017

I'll be on the lookout for sourcemap support. Until then, unusable.

@devongovett

This comment has been minimized.

Member

devongovett commented Dec 20, 2017

If someone wants to look into implementing this, feel free. Since this is a larger feature, I think the best way to go about it would be in three steps, which could be tackled by different people:

  1. Do some research. Look at what other bundlers use (e.g. webpack, browserify, brunch, etc.). I know webpack has a million modes for these too. Not sure the tradeoffs there. Report back here.
  2. Come up with an implementation plan. Perhaps we start with only JS source maps first. How do they get combined? How do we keep things fast? etc.
  3. Implement the plan and write tests.

Thanks!!

@danieltodonnell

This comment has been minimized.

danieltodonnell commented Dec 20, 2017

Hmmm, this might actually be something I have experience with. I'll see what i can do.

@enrichit

This comment has been minimized.

enrichit commented Dec 20, 2017

I'm having a look as well. From what I can see, the most obvious course of action is to utilize the source maps babel already has support for. From what I can see it's literally an option you pass to it. node-sass also supports them and I'm guessing typescript and coffee script too.

It's just a question of making the parcel API nice and sleek and implementing it in such a way that other providers in the future can leverage it.

@devongovett

This comment has been minimized.

Member

devongovett commented Dec 23, 2017

yep, babel (and others) generating source maps isn't a problem. the work will be on combining the source maps together in the JSPackager.

@FoxUSA

This comment has been minimized.

FoxUSA commented Dec 24, 2017

Would also be good that I didn't have to discover this land mine. Maybe point it out on the main site.

ry added a commit to propelml/propel that referenced this issue Jan 4, 2018

Start work on using parcel.
Unfrotunately I just found out it doesn't support source maps
parcel-bundler/parcel#68
Will revisit once it does.

@DeMoorJasper DeMoorJasper referenced this issue Jan 7, 2018

Merged

JS Source Maps support #506

7 of 8 tasks complete
@yysun

This comment has been minimized.

yysun commented Jan 7, 2018

I was impressed by Parcel and will be waiting for source map support.

Here is what I currently have using webpack:

  • write modules in TypeScript
  • bundle as UMD and enable source map
  • publish the bundled JS and source map to npm
  • when using the library, enable source-map-loader, we can debug and trace into the original TypeScript source

I can help test it out in my library once it is developed.

@ivangretsky

This comment has been minimized.

ivangretsky commented Jan 11, 2018

Why is it closed? Is the feature implemented or rejected?

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Jan 11, 2018

It was a duplicate, no need to make an issue if there already is one @ivangretsky Sourcemaps support should be in parcel really soon, feel free to check out #506 to test it out

@albinotonnina

This comment has been minimized.

Member

albinotonnina commented Jan 11, 2018

@ivangretsky have a look at #506

@ivangretsky

This comment has been minimized.

ivangretsky commented Jan 11, 2018

Seems like it's getting close to be done. Awesome!

@danieltodonnell

This comment has been minimized.

danieltodonnell commented Jan 11, 2018

I'm sorry I couldn't contrib to this, but man I'm excited about this going live.

Going to use it on my next production site.

piscisaureus pushed a commit to propelml/propel that referenced this issue Jan 12, 2018

Start work on using parcel.
Unfrotunately I just found out it doesn't support source maps
parcel-bundler/parcel#68
Will revisit once it does.
@ShinobiWPS

This comment has been minimized.

ShinobiWPS commented Jan 18, 2018

@enrichit so SASS/CSS source maps are working already?

@davidnagli

This comment has been minimized.

Member

davidnagli commented Jan 18, 2018

Looks like our performance concerns just solved themselves!!

https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/

@allenmackley

This comment has been minimized.

allenmackley commented Jul 3, 2018

I added this config to .sassrc

{
"sourceMap": true,
"sourceMapEmbed": true
}

That then generates an embedded sourcemap in the generated CSS file. However, the sourcemap doesn't actually work within Chrome. It shows "stdin" and doesn't actually map, I'm assuming because of the JavaScript import.

Is there some way around that?

@spalger

This comment has been minimized.

Contributor

spalger commented Jul 3, 2018

@allenmackley I recommend making a new issue

@parcel-bundler parcel-bundler locked as resolved and limited conversation to collaborators Jul 3, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.