SvelteKit中sourcemaps的存放位置及正确生成配置方法

最新支持TypeScript的SvelteKit版本默认不会主动输出可直接访问的实体sourcemap文件，仅配置svelte编译选项、预处理选项、tsconfig选项不足以生成最终可用的sourcemap，且默认查找路径不符合实际产物规则。

必要补全配置 #

光配置svelte.config.js里的compilerOptions.enableSourcemap、preprocess的sourceMap，以及tsconfig.json里的sourceMap: true还不够，需要补全两个核心配置：

• 开启底层Vite打包工具的生产环境sourcemap生成开关
• 给使用的部署适配器开启sourcemap保留开关，默认适配器会在构建收尾阶段清理中间生成的sourcemap文件

完整可用的svelte.config.js配置示例如下：

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  compilerOptions: {
    enableSourcemap: true
  },
  preprocess: [
    vitePreprocess({
      postcss: true,
      sourceMap: true
    })
  ],
  kit: {
    adapter: adapter({
      // Vercel适配器必须显式开启该参数，否则会删除构建生成的sourcemap
      sourceMaps: true
    }),
    methodOverride: {
      allowed: ['PATCH', 'DELETE']
    },
    vite: {
      build: {
        // 核心：开启Vite生产构建sourcemap生成
        sourcemap: true
      }
    }
  }
};

export default config;

已配置的tsconfig.json中compilerOptions.sourceMap: true无需修改，保留即可。

Sourcemap 实际存放路径 #

完成上述配置后执行npm run build，生成的sourcemap文件不会出现在.svelte-kit/output根目录，按代码类型分别存放在对应子目录：

• 服务端侧代码sourcemap：存放于.svelte-kit/output/server/路径下，与打包后的同名.js文件同目录，后缀为.js.map
• 客户端侧静态资源sourcemap：存放于.svelte-kit/output/client/路径下，与对应打包后的客户端JS文件同目录，后缀为.js.map
• Vercel适配器最终输出的部署产物中，sourcemap会同步保留在.vercel/output/目录下的对应服务函数、静态资源路径中，不会被清理

补充说明：开发模式（npm run dev）运行时sourcemap默认开启，但仅存于Vite内存中不会写入磁盘，只有执行生产构建命令才会生成实体map文件。

内容的提问来源于stack exchange，提问作者Craig Howell