如何在Vite中获取辨识度高的错误日志？排查Svelte构建报错

一、让日志更详细 #

• 修改package.json中的build命令，添加调试参数：
  将原命令改为 "build": "vite build --debug"，执行pnpm run build后会输出包含编译文件路径的详细日志，直接定位出错的Svelte组件。也可以直接执行pnpm run build -- --debug（双短横线用于向vite传递参数）。
• 在vite.config.js中配置Svelte插件，增强日志输出：

  import { svelte } from '@sveltejs/vite-plugin-svelte';
  
  export default {
    plugins: [
      svelte({
        onwarn: (warning, handler) => {
          console.warn(warning);
          handler(warning);
        },
        compilerOptions: {
          strict: true
        }
      })
    ]
  };
  

  开启strict模式会触发更严格的语法检查，onwarn会打印所有潜在问题的警告信息。

二、快速定位出错文件 #

从错误栈可知问题出在Svelte解析脚本时遇到意外token，按以下步骤排查：

• 分段排查：注释掉部分组件的引入，逐步执行构建，缩小出错范围到具体组件。
• 检查组件语法：
  1. 查看<script>标签内的JS代码：是否有遗漏的分号、括号，或者使用了Svelte未支持的JS语法（如未转译的装饰器、过时的语法提案）。
  2. 检查模板部分：确认标签是否闭合，插值表达式{}内的代码是否合法，有没有使用未定义的变量。
• 提前静态检查：安装eslint-plugin-svelte，配置ESLint后执行pnpm eslint .，提前发现语法问题，避免到构建阶段才报错。

三、其他实用调试技巧 #

• 临时添加日志（应急用）：找到错误栈中提到的script.js:50:10文件位置，添加console.log打印当前解析的代码片段，直接看到导致意外token的内容。
• 对比命令差异：检查package.json的build命令是否与直接执行vite build有区别（比如额外的环境变量）；执行pnpm run build --verbose查看pnpm的执行细节，确认依赖或脚本执行是否存在差异。

内容的提问来源于stack exchange，提问作者C193_007 Nazmul Tanvir