JS Inline Sourcemaps

[ctsstc]

🙋 feature request

I would like to have sourcemaps inline at the bottom of my JS files.

🤔 Expected Behavior

Instead of building out a map file it would put the source mapping into the source file at the bottom of it/inline.

😯 Current Behavior

Currently all map files are generated alongside the built file(s).

💁 Possible Solution

Utilize babel config options if parcel is using babel.

🔦 Context

I've tried adding a .babelrc with the following for inline JS but it didn't do anything. It could be nice to see what the resulting babel config is that parcel uses for debugging purposes. I'm assuming parceljs builds out its own babel config and uses babel.

{
  "presets": [
    ["@babel/preset-env", {
      "sourceMaps": "inline"
    }]
  ]
}

💻 Examples

[johnjiang]

@DeMoorJasper, how do we enable this in the current parcel 2 beta 1?

[DeMoorJasper]

You have to configure the targets as stated in the PR, there's some basic docs about how it works: https://v2.parceljs.org/getting-started/configuration/#targets

Should look something like this:

{
  "targets": {
    "main": {
      "sourceMap": {
        "inline": true
      }
    }
  }
}

[johnjiang]

That's actually similar to what I tried based off the PR:

  "targets": {
    "node": {
      "engines": {
        "node": ">= 8.0.0"
      },
      "sourceMap": {
        "inline": true
      }
    }
  }

But I'm still seeing regular source-maps being generated.

I also tried your suggestion but getting the same experience.

[johnjiang]

Ah I see what's happening, inlinesourcemap only works when building a production copy. It doesn't work when in development.

Is this something that can be added? For my particular use-case I would love for dev to use inline sourcemap and prod to default to normal source-maps.

[DeMoorJasper]

Ow yeah, we currently do this for performance reasons. Inlining sourcemaps requires reading all the source files, encoding them and requires a bit of memory and cpu time.

Could you still share a small reproduction repo or something? Because I think that should already work at the moment.

[johnjiang]

Yup, here you go. https://github.com/johnjiang/parcel2-sourcemap-repro

npx parcel public/index.html

does not inline the sourcemaps

npx parcel build public/index.html

This works correctly as there's only the single .js output file

[DeMoorJasper]

@johnjiang change command to parcel public/index.html --target main

[johnjiang]

Ah, that's cool. Thanks it works!