如何让源映射与 svelte-preprocess、typescript、源 .ts 文件一起使用

Question

我正在使用 svelte-preprocess 在我的 Svelte 应用程序中编译打字稿。

这是精简文件：

<script lang="ts" src="./component.ts"></script>
<template src="./component.html></template>
<style src="./component.scss"></style>

这是 rollup.config.js 的精简部分

svelte({
    preprocess: sveltePreprocess({ 
        sourceMap: !production, 
        defaults: {
           markup: 'html',
           script: 'typescript',
           style: 'scss'
        }
    }),
    compilerOptions: {
        dev: !production
    }
}),

我的配置文件中也有这个

    typescript({
        sourceMap: !production,
        inlineSources: !production
    }),

我遇到的问题是 component.ts 没有发生源映射。当我在 Chrome 的调试器中的 component.ts 某处出现错误时，它会在 component.svelte 文件的最后一行而不是 component.ts 中显示行号。

当我在脚本 lang="ts" 标记中内联代码时，它确实有效，并且源映射显示得很好。

如何让 svelte-preprocess 能够使用源映射、打字稿并从 svelte 组件文件的 .ts 文件中获取数据？

Answer 1

借助版本 3.44.0 上的 Svelte，您可以依靠新的编译器选项 ， enableSourcemap它可以更好地控制 JavaScript 和 CSS 源映射的编译器输出。

此配置为预处理样式表和 JavaScript 提供源映射。

// svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  compilerOptions: {
    enableSourcemap: true,
  },
  preprocess: preprocess({
    sourceMap: true,
  }),
  kit: {
    adapter: adapter(),
    target: '#svelte',
  },
};

export default config;

有关更多详细信息，请参阅 3.44.0 的发行说明：https://svelte.dev/blog/whats-new-in-svelte-november-2021