如何使用 rollup 和 terser 获取源映射我的原始 TypeScript 代码？

Question

这里问了一个类似的问题：Rollup is not generating typescript sourcemap

..但是关于使用 svelte 进行缩小（我不熟悉）而不是更简洁的汇总。我不确定这有多大的不同。我复制了建议的解决方案，结果是 rollup.config.js:

import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';

export default [
  {
    input: 'dist/index.js',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs',
        sourcemap: true
      },
      {
        file: 'dist/fesm2015/index.js',
        format: 'es',
        sourcemap: true
      }
    ],
    plugins: [
      terser({ output: { max_line_len: 511 } }),
      typescript({ sourceMap: true, inlineSources: true })
    ]
  }
];

我尝试了源映射标志的各种组合，例如将 TypeScript 插件 sourceMap 选项设置为 false，并在我的输出配置中使用 sourcemap: true，但是 none帮助创建原始 TypeScript 的源映射。我只得到映射到我的 TypeScript 代码的 JavaScript 化版本。

并不是为了转移我要问的问题，但是...

一个有用的 Angular 技巧我一路学到...

            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "vendor": true
              },

除了损坏的压缩代码之外，我无法追踪到任何东西，浏览器的调试器拒绝在损坏代码的第一行以外的任何地方停止...直到我发现默认情况下，即使在开发模式下，Angular 也只会为您的 Angular 项目代码提供源映射，而不是为您的任何 npm 依赖项提供源映射。

你的angular.json中需要"sourceMap"的详细版本，不仅仅是一个简单的true标志，而是具体的细节，包括"vendor": true.

Answer 1

答案是（似乎一如既往）...更多插件！

在这种情况下，rollup-plugin-sourcemaps 插件。

import sourcemaps from 'rollup-plugin-sourcemaps';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';

export default [
  {
    input: 'dist/index.js',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs'
      },
      {
        file: 'dist/fesm2015/index.js',
        format: 'es'
      }
    ],
    plugins: [
      sourcemaps(),
      terser(),
      typescript({ sourceMap: true, inlineSources: true })
    ]
  }
];

这显然是使用 TypeScript 编译器生成的地图文件所必需的魔法。

如何使用 rollup 和 terser 获取源映射我的原始 TypeScript 代码？

How do I get sourcemaps my original TypeScript code using rollup and terser?

angular

typescript

source-maps

rollup

terser