Svelte引入Carbon组件后Chrome DevTools无法设置断点如何解决？

我搭建了一个使用Carbon Components的Svelte+Electron项目，大部分功能运行正常，但调试环节出现问题。
以下是我用于测试的示例组件：

<script lang="ts">
    import { Tile } from 'carbon-components-svelte'
    let name = 'John Doe'

    function test() {
        console.log('You clicked me!')
    }
</script>

<div>
    <Tile>
        <h2>{name}</h2>
        <button on:click={test}>Click me</button>
    </Tile>
</div>

我在开发环境加载该组件时，无法在Chrome的dev tools中设置断点，点击.svelte文件行号添加的断点显示为灰色，不会触发。
但如果我打开初始配置如下的svelte.config.js文件：

import sveltePreprocess from 'svelte-preprocess'
import { optimizeImports } from "carbon-preprocess-svelte";

export default {
  preprocess: [ sveltePreprocess(), optimizeImports() ]
}

将其中的optimizeImports()调用移除后，断点功能就恢复正常了。
请问出现该问题的原因是什么？ #

问题原因 #

optimizeImports是carbon-preprocess-svelte提供的按需导入优化工具，它会在预编译阶段修改你Svelte文件<script>块里的组件导入语句，把全量导入的写法替换为直接导入对应单个组件源文件的路径，从而减少生产环境的打包体积。
该工具目前的实现存在缺陷：处理代码修改时没有生成正确的source map（源码映射）片段，会打断后续Svelte编译器生成的源码映射和原始.svelte文件的位置对应关系。Chrome DevTools的断点功能完全依赖source map将编译后的JS代码位置映射到本地原始文件位置，映射关系出错后就会出现断点无法设置、无法触发的问题。
移除optimizeImports后没有额外的预处理器修改你的代码，Svelte编译器生成的source map完全匹配原始文件，断点功能自然恢复正常。

解决方案 #

方案1：分环境配置预处理器（推荐） #

开发环境禁用optimizeImports保证调试正常，生产环境开启保留按需导入的优化效果，修改svelte.config.js如下：

import sveltePreprocess from 'svelte-preprocess'
import { optimizeImports } from "carbon-preprocess-svelte";

const isProduction = process.env.NODE_ENV === 'production'
const preprocessList = [sveltePreprocess()]
if (isProduction) {
  preprocessList.push(optimizeImports())
}

export default {
  preprocess: preprocessList
}

方案2：等待官方修复 #

你可以向carbon-preprocess-svelte的维护者反馈该问题，等待官方修复source map适配缺陷后再全环境开启该功能。 #

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