Electron CommonJS环境下TypeScript+Webpack动态导入问题

在Electron Forge v6.2.1的Webpack+TypeScript模板中，主进程加载不参与构建的外部JS插件时，import(/* webpackIgnore: true */)出现模块找不到的问题，本质是Webpack的模块解析逻辑覆盖了Node原生的模块查找机制，以下是可行的解决方案：

方案一：使用Node原生require加载（最简便） #

主进程本身是Node.js环境，直接用Node的require加载外部文件，完全绕开Webpack的处理，路径必须用绝对路径避免解析错误：

示例代码 #

import { createRequire } from 'module';
import * as path from 'path';

// 用createRequire适配ES模块环境（主进程如果是ES模块的话）
const require = createRequire(import.meta.url);

// 生成外部插件的绝对路径，这里以项目根目录下的external-plugins文件夹为例
const pluginAbsolutePath = path.resolve(process.cwd(), 'external-plugins/my-plugin.js');

// 加载插件
const plugin = require(pluginAbsolutePath);

// 调用插件导出的方法
if (plugin.init) {
  plugin.init();
}

注意事项 #

• 若外部插件是ES模块（用export导出），建议改为CommonJS格式（module.exports），或在插件文件顶部添加"type": "commonjs"；
• 若必须保留ES模块格式，可改用import()配合绝对路径，但要确保Webpack完全不处理该路径（后续配置externals）。

方案二：配置Webpack跳过外部插件解析 #

在主进程的Webpack配置文件（如webpack.main.config.js）中添加externals，告诉Webpack不要处理指定路径的模块，交给Node原生解析：

配置示例 #

module.exports = {
  // 其他原有配置
  externals: [
    function ({ request }, callback) {
      // 匹配外部插件的路径规则，比如包含"external-plugins"的路径
      if (/external-plugins/.test(request)) {
        // 告诉Webpack这是CommonJS外部模块
        return callback(null, `commonjs ${request}`);
      }
      callback();
    }
  ]
};

配置后，即使使用import(/* webpackIgnore: true */)也能正常加载，但更推荐直接用require。

方案三：用fs+vm加载（隔离环境场景） #

如果需要给插件提供隔离的运行环境，或自定义注入全局变量，可读取插件文件内容后用Node的vm模块执行：

示例代码 #

import * as fs from 'fs';
import * as vm from 'vm';
import * as path from 'path';

const pluginPath = path.resolve(process.cwd(), 'external-plugins/my-plugin.js');
const pluginCode = fs.readFileSync(pluginPath, 'utf8');

// 创建自定义上下文，可注入需要的API（比如Electron的模块）
const pluginContext = vm.createContext({
  require,
  module: { exports: {} },
  electron: require('electron'),
  console
});

// 执行插件代码
vm.runInNewContext(pluginCode, pluginContext, { filename: pluginPath });

// 获取插件导出内容
const plugin = pluginContext.module.exports;
plugin.init?.();

TypeScript类型处理 #

外部插件没有TS类型定义时，可创建声明文件（如src/external-plugin.d.ts）：

// 通用声明，匹配所有外部插件
declare module '../external-plugins/*' {
  export function init(): void;
  // 根据插件实际导出添加类型
}

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