0

这里问了一个类似的问题：Rollup is not generate 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 依赖项提供源映射。

您"sourceMap"的. angular.json_ true_"vendor": true

4

1 回答 1

0

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

在这种情况下，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 编译器生成的地图文件所必需的魔法。

于 2021-06-30T02:45:37.210 回答