如何在Svelte 3.53.1中启用开发模式以使用DevTools？

核心变化 #

Svelte Rollup插件在新版本中已移除原有的dev配置项，改用compilerOptions.dev来控制开发模式的开关。

具体配置修改 #

打开你的rollup.config.js，找到svelte插件的配置块，将原有的dev: !production迁移到compilerOptions对象内：

旧配置（已废弃） #

svelte({
  dev: !production,
  // 其他配置项...
})

新配置（当前版本支持） #

svelte({
  compilerOptions: {
    dev: !production // 将dev属性移至此处
  },
  // css、emitCss等其他原有配置保持不变
})

验证DevTools生效 #

1. 确保浏览器已安装并启用Svelte DevTools扩展
2. 重启Rollup开发服务器（执行npm run dev）
3. 打开浏览器开发者工具，切换到Svelte标签页，即可查看组件树等调试内容

额外注意 #

• 确认配置顶部的production变量逻辑正常，通常定义为：const production = !process.env.ROLLUP_WATCH;
• 只有在开发环境（ROLLUP_WATCH为true，即production为false）下，dev才会被设为true，DevTools才能正常工作

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