如何使用汇总和简洁来获取原始TypeScript代码的源代码映射

Question

这里也提出了类似的问题：Rollup没有生成typescript源映射

但关于用苗条来缩小(我不熟悉(而不是简洁的汇总。我不确定这有多大的不同。我复制了建议的解决方案，得到了这个汇总。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化版本的映射。

为了不影响我提出的问题，但是

一路上我学到了一个有用的角度技巧。。。

"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编译器生成的映射文件所必需的魔法。