TypeScript项目出现exports未定义错误，寻求解决方法

你遇到的错误是因为TypeScript按CommonJS模块规则编译代码，但Electron渲染进程的浏览器环境不支持CommonJS的exports变量。以下是两种可行的解决办法：

方法1：切换为ES模块 #

1. 修改tsconfig.json，将模块编译规则改为ES标准：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "sourceMap": false,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": [
    "src/**/*"
  ]
}

2. 在加载渲染进程代码的HTML文件中，给script标签添加type="module"属性，告诉浏览器以ES模块方式加载：

<script type="module" src="./dist/renderer.js"></script>

方法2：使用打包工具处理模块兼容 #

如果需要保留CommonJS模块配置，或者要处理复杂依赖（比如你用到的xlsx），可以用打包工具（如Vite、Webpack）将代码转译为浏览器兼容的格式：

1. 安装Vite及Electron插件：

npm install vite vite-plugin-electron -D

2. 创建vite.config.js，配置项目入口与打包规则，示例配置：

import { defineConfig } from 'vite'
import electron from 'vite-plugin-electron'

export default defineConfig({
  plugins: [
    electron({
      main: {
        entry: 'src/main.js'
      },
      renderer: {
        entry: 'src/renderer.ts'
      }
    })
  ]
})

3. 修改package.json的启动脚本，通过Vite打包后启动Electron：

{
  "scripts": {
    "dev": "vite"
  }
}

额外提示：你的Upload.ts在模块顶部直接获取DOM元素，可能会因为DOM未加载完成导致null，建议将DOM获取逻辑放到函数内部或DOMContentLoaded事件回调中。

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