Electron-Vite TypeScript项目引入本地JS库编译报错求助

问题根源 #

1. 作用域不匹配：你在globals.ts中定义的_global是模块局部变量，但js-globals库的代码期望_global是挂载在Electron主进程全局对象（global/globalThis）上的全局变量，库所在模块无法访问你模块内的局部变量，导致运行时抛出_global is not defined错误。
2. Tree Shaking优化：Vite的Tree Shaking机制会自动移除未被显式使用的局部变量，进一步导致编译后的代码中丢失_global的定义。

解决方案 #

方案一：先挂载全局_global再引入库 #

修改src/globals.ts，先将_global挂载到Electron主进程的全局对象上，再引入js-globals库，确保库能访问到全局变量：

// 先挂载_global到全局对象
;(global as any)._global = global
// 再引入本地库
import "js-globals"

// 后续继续给_global添加自定义属性
_global.yourCustomProperty = 'your value'

方案二：使用标准全局对象globalThis #

globalThis是ES标准定义的全局对象，在Node.js/Electron环境中完全兼容，写法更通用：

// 挂载_global到标准全局对象
;(globalThis as any)._global = globalThis
import "js-globals"

// 后续操作示例
_global.yourCustomProperty = 'your value'

方案三：阻止Tree Shaking优化 #

如果修改后仍存在变量被优化的问题，可以添加注释或导出变量，标记其为需要保留：

// 注释告诉打包工具不要移除该变量
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
;(global as any)._global = global
import "js-globals"

// 或者通过导出变量避免被Tree Shaking移除
export const _global = global as any

全局引入本地库的通用建议 #

• 依赖全局变量的库：必须在引入库之前，将所需全局变量挂载到global/globalThis上，确保挂载操作在库执行前完成。
• 无全局依赖的库：直接在需要的模块中import即可，无需额外配置。
• TypeScript类型支持：如果本地库没有提供类型声明文件，可以在项目根目录创建typings/js-globals/index.d.ts手动补充类型：

  declare module 'js-globals' {
    // 根据库的实际功能添加类型定义
    export const someMethod: () => void
  }
  

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