typescriptrollupterser

How do I get better source code maps from my compiled and minimized TypeScript code?


My rollup config is generating source maps for me. They just aren't very good source maps. They aren't doing a good job of restoring full original variable and function names, only a smattering of the original code organization and formatting.

I found an older answer to this same question: How do I get sourcemaps my original TypeScript code using rollup and terser?

...but that's not helping. That example also doesn't show a solution where the input to rollup is TypeScript code. Presumably the index.js referenced in this other answer is the product of running tsc before rollup. (I tried running tsc first myself, and using the resulting index.js as input to rollup, but that didn't help. Same crappy maps.)

Here's my current rollup.config.js:

const terser = require('@rollup/plugin-terser');
const typescript = require('@rollup/plugin-typescript');
const pkg = require('./package.json');

module.exports = [{
  input: 'src/index.ts',
  output: [
    {
      file: pkg.browser,
      sourcemap: true,
      format: 'umd',
      name: 'tbUtil'
    },
    {
      file: pkg.main,
      sourcemap: true,
      format: 'cjs'
    },
    {
      file: pkg.module,
      sourcemap: true,
      format: 'esm'
    }
  ],
  plugins: [
    terser({ format: { max_line_len: 511 } }),
    typescript()
  ]
}];

From what I can tell, I believe what's happening is that the multiple TypeScript source files are being turned into multiple minimized JavaScript files, and then, after that, the only source maps I'm getting are the source maps created which map the various composite 'index.min.*" files back to the various already-minimized-but-separate *.js files.

When debugging in Chrome, this is the kind of stuff I'm seeing:

Much-too-minimized code

I could, of course, turn off a lot of the minimization options, but that's not something I should have to do. I want fully minimized code, and maps that, as closely as possible, resurrect the original TypeScript code starting from the minimized code and the maps.

In case it matters, here are my devDependencies so the version numbers of the various tools can be seen:

  "devDependencies": {
    "@rollup/plugin-terser": "^0.4.4",
    "@rollup/plugin-typescript": "^12.1.2",
    // ...
    "rollup": "^4.41.1",
    // ...
    "typescript": "~5.2.2"
  },


Solution

  • Through trial and error I eventually arrived at this:

    const sourcemaps = require('rollup-plugin-sourcemaps');
    const terser = require('@rollup/plugin-terser');
    const typescript = require('@rollup/plugin-typescript');
    const pkg = require('./package.json');
    
    module.exports = [{
      input: 'src/index.ts',
      output: [
        {
          file: pkg.browser,
          sourcemap: true,
          format: 'umd',
          name: 'tbUtil'
        },
        {
          file: pkg.main,
          sourcemap: true,
          format: 'cjs'
        },
        {
          file: pkg.module,
          sourcemap: true,
          format: 'esm'
        }
      ],
      plugins: [
        typescript({ inlineSources: true }),
        sourcemaps(),
        terser({ format: { max_line_len: 511 }, sourceMap: { includeSources: true } })
      ]
    }];
    

    Along with "sourceMap": true in my package.json. (The max_line_len setting above is extraneous to solving the sourcemap problem.)