时间戳

首页 > 解决方案 > 如何让 sourcemaps 与 svelte-preprocess、typescript、sourced .ts 文件一起使用

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

问题描述

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

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

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

标签： sveltesvelte-3

解决方案

使用 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

推荐阅读