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

【问题标题】：How do I get sourcemaps my original TypeScript code using rollup and terser?如何使用 rollup 和 terser 获取原始 TypeScript 代码的源映射？
【发布时间】：2021-09-12 04:27:01
【问题描述】：

这里提出了类似的问题：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，但这些都没有帮助创建原始 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。

【问题讨论】：

标签： angular typescript source-maps rollup terser

【解决方案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 编译器生成的地图文件所必需的魔法。

【讨论】：