babel / minify

:scissors: An ES6+ aware minifier based on the Babel toolchain (beta)
https://babeljs.io/repl
MIT License
4.39k stars 225 forks source link

merge-sibling-variables loses source mapping #1046

Open seanmorris opened 1 year ago

seanmorris commented 1 year ago

Describe the bug

The plugin babel-plugin-transform-merge-sibling-variables does not maintain source mapping when merging sibling variable declarators into a single declaration after babel-plugin-transform-modules-commonjs has been applied.

To Reproduce

Minify a file that has been processed with babel-plugin-transform-modules-commonjs. If the original file has more than one import statement, the mapping will be lost.

Minimal code to reproduce the bug

index.js.map

import { abc } from 'abc';
import { xyz } from 'xyz';

Actual Output

index.out.js

"use strict";

var _abc = require("abc"),
  _xyz = require("xyz");

//# sourceMappingURL=index.out.js.map

index.out.js.map

{
    "version": 3,
    "file": "index.actual.js",
    "names":
    [],
    "sources":
    [
        "index.js"
    ],
    "sourcesContent":
    [
        "import { abc } from 'abc';\nimport { xyz } from 'xyz';"
    ],
    "mappings": ""
}

Expected Output

index.out.js

"use strict";

var _abc = require("abc"),
  _xyz = require("xyz");

//# sourceMappingURL=index.out.js.map

index.out.js.map

{
    "version": 3,
    "file": "index.expected.js",
    "names":
    [
        "_abc",
        "require",
        "_xyz"
    ],
    "sources":
    [
        "index.js"
    ],
    "sourcesContent":
    [
        "import { abc } from 'abc';\nimport { xyz } from 'xyz';"
    ],
    "mappings": ";;IAAAA,IAAA,GAAAC,OAAA,OAA0B;EAC1BC,IAAA,GAAAD,OAAA,OAA0B"
}

Configuration

How are you using babel-minify?

$ babel index.js -o index.out.js

babel-minify version: 0.5.2

babel version : 7.21.0

babel-plugin-transform-modules-commonjs: 8.0.11

babel-plugin-transform-merge-sibling-variables: 6.9.5

babelrc

{
  "sourceMaps": true,
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    "babel-plugin-transform-merge-sibling-variables",
  ]
}

package.json

{
  "devDependencies": {
    "@babel/cli": "7.21.0",
    "@babel/core": "7.21.0",
    "babel-minify": "0.5.2",
    "plugin-transform-modules-commonjs": "8.0.11"
  }
}

Possible solution

This pull request: https://github.com/babel/minify/pull/1047

You can use the link below to inspect the mappings for a given output file and sourcemap.

https://evanw.github.io/source-map-visualization/#MTEwACJ1c2Ugc3RyaWN0IjsKCnZhciBfYWJjID0gcmVxdWlyZSgiYWJjIiksCiAgX3h5eiA9IHJlcXVpcmUoInh5eiIpOwoKLy8jIHNvdXJjZU1hcHBpbmdVUkw9aW5kZXguZXhwZWN0ZWQuanMubWFwMjQ1AHsidmVyc2lvbiI6MywiZmlsZSI6ImluZGV4LmV4cGVjdGVkLmpzIiwibmFtZXMiOlsiX2FiYyIsInJlcXVpcmUiLCJfeHl6Il0sInNvdXJjZXMiOlsiaW5kZXguanMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgYWJjIH0gZnJvbSAnYWJjJztcbmltcG9ydCB7IHh5eiB9IGZyb20gJ3h5eic7Il0sIm1hcHBpbmdzIjoiOztJQUFBQSxJQUFBLEdBQUFDLE9BQUEsT0FBMEI7RUFDMUJDLElBQUEsR0FBQUQsT0FBQSxPQUEwQiJ9

https://evanw.github.io/source-map-visualization/

alternative tool:https://sokra.github.io/source-map-visualization/