Webpack在Electron中编译shortcuts包报错：record不是函数

错误原因分析 #

• 实例方法误用为静态方法：从你提供的类型声明来看，record是Shortcuts类的实例方法，而非静态方法。你直接通过类本身调用Shortcuts.record()，会触发"不是函数"的错误——静态方法挂载在类构造函数上，实例方法必须先实例化类才能调用。
• 导入方式可能不匹配：部分npm包的实际导出方式可能和类型声明标注有差异，比如包本身是默认导出而非命名导出，导致你解构的Shortcuts并非预期的类构造函数。

解决方案 #

方案1：修正实例化与调用逻辑 #

先创建Shortcuts类的实例，再调用实例上的record方法：

import { Shortcuts } from 'shortcuts';

export function bindKeys(): void {
  try {
    const shortcutsInstance = new Shortcuts();
    shortcutsInstance.record((sequence: string[]) => console.log('pressed:', sequence));
  } catch (err) {
    console.error(err);
  }
}

方案2：确认并调整导入方式 #

检查node_modules/shortcuts下的入口文件（如dist/index.js），如果看到module.exports = Shortcuts或export default Shortcuts，说明包是默认导出，需修改导入语句：

import Shortcuts from 'shortcuts';

export function bindKeys(): void {
  try {
    const shortcutsInstance = new Shortcuts();
    shortcutsInstance.record((sequence: string[]) => console.log('pressed:', sequence));
  } catch (err) {
    console.error(err);
  }
}

方案3：优化模块解析配置 #

如果上述方案无效，调整Webpack和TypeScript的模块交互配置：

1. 确保tsconfig.json中esModuleInterop保持true，提升对CommonJS格式包的兼容性。
2. 在Webpack的resolve配置中添加mainFields，优先解析ES模块入口：

resolve: {
  extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
  mainFields: ['module', 'main']
},

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