在SvelteKit+Electron项目中创建并运行TypeScript文件的最优方案

1. 阻止SvelteKit处理Electron主进程文件 #

SvelteKit默认会扫描src下的文件，导致主进程的main.ts被当作页面触发重载。修改vite.config.ts，在Svelte插件配置里添加排除规则，跳过主进程相关文件：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    sveltekit({
      exclude: ['src/main.ts', 'src/preload.ts'] // 填入你的主进程/预加载脚本路径
    })
  ]
});

同时确保主进程文件放在src根目录（而非src/routes），避免被SvelteKit路由系统自动识别。

2. 单独配置Electron主进程的TS编译 #

不要用tsc单文件编译，给主进程单独创建tsconfig.electron.json，明确编译规则和输出目录：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "outDir": "./compiled",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true, // 自动解决导入时添加['default']的问题
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/main.ts", "src/preload.ts"],
  "exclude": ["src/routes/**/*"]
}

3. 替换electron.cjs为TS并配置编译脚本 #

将electron.cjs重命名为main.ts（放在src目录下），然后在package.json中添加编译与启动脚本：

{
  "scripts": {
    "electron:build": "tsc --project tsconfig.electron.json",
    "electron:dev": "npm run electron:build && electron ./compiled/main.js",
    "dev": "concurrently \"vite dev\" \"npm run electron:dev\""
  }
}

先安装concurrently实现多进程同时启动：npm install -D concurrently。

4. 确认编译产物位置 #

运行npm run electron:build后，主进程编译产物会输出到compiled目录下；SvelteKit渲染进程的编译产物则在.sveltekit/output目录中，两者互不干扰。

额外排查点 #

• 若仍出现页面重载，检查Vite日志，确认被重载的文件已被排除在Svelte插件处理范围外。
• 确保SvelteKit主配置tsconfig.json与tsconfig.electron.json无冲突，比如主配置module通常为ESNext，而Electron主进程需设为CommonJS。

内容的提问来源于stack exchange，提问作者Arthur Isnt original