使用Rollup构建时如何调试原始Svelte代码？

我用Rollup构建Svelte项目时，{@debug}指令能正常运行，但在浏览器里设置断点时，看到的都是编译后的混乱代码，没法直接调试原始的Svelte代码。项目加载的是dist/linkman.js文件，以下是我的配置和代码：

rollup.config.js #

import path from "path";
import svelte from "rollup-plugin-svelte";
import replace from "@rollup/plugin-replace";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import alias from "@rollup/plugin-alias";
import { terser } from "rollup-plugin-terser";
import copy from "rollup-plugin-copy";
import ignoreImport from "rollup-plugin-ignore-import";
 
const BROWSER_ENV = process.env.BROWSER_ENV || "chrome";
const NODE_ENV = process.env.NODE_ENV || "development";
const production = !process.env.ROLLUP_WATCH;

const envs = replace({
  "process.env.BROWSER_ENV": JSON.stringify(BROWSER_ENV),
  "process.env.NODE_ENV": JSON.stringify(NODE_ENV),
  preventAssignment: true,
});

export default [
  {
    input: "src/app.js",
    output: {
      // sourcemap: true,
      format: "iife",
      name: "app",
      file: "dist/linkman.js",
    },
    plugins: [
      alias({
        entries: [
          {
            find: "@linkman/plugins-ui",
            replacement: path.resolve(
              path.resolve(__dirname),
              "src/components/plugin-ui/"
            ),
          },
        ],
      }),

      svelte({
        dev: true,
        css: (css) => {
          css.write("bundle.css");
        },
      }),

      resolve({
        browser: true,
        dedupe: ["svelte"],
      }),
      envs,
      commonjs(),
      production && terser(),
    ],
    watch: {
      clearScreen: false,
    },
  },
  {
    input: `src/content/${BROWSER_ENV}.js`,
    output: {
      format: "iife",
      name: "content",
      file: "dist/content/content.js",
    },
    plugins: [
      resolve({
        browser: true,
      }),
      envs,
      commonjs(),
      production && terser(),
      copy({
        targets: [
          { src: "src/content/styles.css", dest: "dist/content/" },
          {
            src: `src/manifest.${BROWSER_ENV}.json`,
            dest: "dist/",
            rename: "manifest.json",
          },
          { src: "src/index.html", dest: "dist/" },
          { src: "src/themes/fonts.css", dest: "dist/themes/" },
          { src: "src/themes/themes.css", dest: "dist/themes/" },
          { src: "src/static/", dest: "dist/" },
        ],
      }),
    ],
  },
  {
    input: `src/background/${BROWSER_ENV}.js`,
    output: {
      format: "iife",
      name: "background",
      file: "dist/background.js",
    },
    plugins: [
      ignoreImport({
        extensions: [".svelte"],
        body: "export default undefined;",
      }),
      resolve({
        browser: true,
      }),
      envs,
      commonjs(),
      production && terser(),
    ],
  },
];

App.svelte #

<script>
  import Results from './Results.svelte';
  import Input from './Input/Input.svelte';

  import { results, inputState, storedKeys } from '../store';
  import constants from '../constants';

  export let enabled = false;
</script>

{@debug enabled}
{#if enabled}
  <div class={`search-wrapper ${$storedKeys.theme ? 'theme-'+$storedKeys.theme : ''}`}>
    <div class="search">

      <Input />
      {@debug}
      {#if $inputState !== 'plugin'}
        <Results on:select />
      {/if}
    </div>
  </div>
{/if}

<style>
  :global(body) {
    font-size: 16px;
  }

  :global(*) {
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
  }

  .search-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--gray-800);
  }

  .search {
    background-color: var(--bg-80);
    border: 1px solid var(--border);
    position: relative;
    top: 90px;
    width: 75%;
    max-width: 620px;
    min-height: 50px;
    max-height: 80vh;
    border-radius: 5px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  @supports (backdrop-filter: blur(15px) saturate(2)) {
    .search {
      backdrop-filter: blur(15px) saturate(2);
    }
  }
</style>

请问是否可以直接调试原始的Svelte代码？

当然可以直接调试原始Svelte代码，核心问题是你的Rollup配置未开启sourcemap，这是浏览器将编译后代码映射回原始Svelte文件的关键。

步骤1：开启sourcemap配置 #

在第一个打包配置（对应dist/linkman.js）的output字段中，取消sourcemap: true的注释：

output: {
  sourcemap: true, // 开启sourcemap
  format: "iife",
  name: "app",
  file: "dist/linkman.js",
},

如果需要调试content.js和background.js，同样给它们的output字段添加sourcemap: true。

步骤2：确保开发模式不压缩代码 #

你的配置中已经通过production && terser()实现了“仅生产环境压缩代码”，调试时用rollup -w启动开发模式即可，不会触发代码压缩，避免断点失效。

步骤3：确认Svelte插件的dev模式 #

你已经设置了svelte({ dev: true })，该配置会保留调试相关信息、禁用生产环境优化，确保sourcemap能正确映射原始代码。

浏览器调试操作 #

配置完成后重新打包，打开浏览器开发者工具：

• 切换到Sources面板
• 在文件树中找到src/目录下的.svelte文件（Chrome一般在Page > top > webpack://路径下）
• 直接在原始Svelte代码行上设置断点，即可调试原始代码的执行流程

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