如何使用汇总和terser获取源地图我的原始TypeScript代码？

Question

这里提出了一个类似的问题：Rollup没有生成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插件source ceMap选项设置为false，以及在我的输出配置中使用源地图：true，但这些都没有帮助创建原始TypeScript的源地图。我只获得TypeScript代码的JavaScript化版本的映射。

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

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

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

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

您的文件中需要“sourceMap”的详细版本。json，不仅仅是一个简单的true标志，而是具体的细节，包括“供应商”：true。

Answer 1

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

在本例中，汇总插件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编译器生成的映射文件所必需的。