如何让 sourcemaps 与 svelte-preprocess、typescript、sourced .ts 文件一起使用答案

【问题标题】：How to get sourcemaps working with svelte-preprocess, typescript, sourced .ts file如何让 sourcemaps 与 svelte-preprocess、typescript、sourced .ts 文件一起使用
【发布时间】：2021-07-20 10:22:06
【问题描述】：

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

这里是苗条的文件：

<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 没有发生源映射。当我在 component.ts 中某处的 Chrome 调试器中出现错误时，它会在 component.svelte 文件的最后一行显示一个行号，而不是 component.ts。

当我将代码内联到脚本 lang="ts" 标记中时，它确实可以工作，并且源映射正常。

我如何让 svelte-preprocess 处理源映射、打字稿和来自 .ts 文件的 svelte 组件文件？

【问题讨论】：

您是否尝试过设置sourceMap: true 而不是!production？

标签： svelte svelte-3

【解决方案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

【讨论】：

interlink