TypeScript Electron插件系统：动态路径加载插件问题咨询

核心原因：Webpack对模块加载的拦截 #

你的问题本质是Webpack打包替换了Node.js原生的require函数——WebStorm提示的__WebpackModuleApi.RequireFunction就是证据。Webpack的封装版require只能识别它打包过的模块ID，无法直接读取文件系统中动态生成路径的外部模块；而硬编码路径能成功，是因为Webpack编译时能直接解析到该路径，将其作为外部模块处理。

解决方法 #

1. 使用Node.js原生require函数 #

绕开Webpack的封装，直接调用Node.js原生require：

// 主进程中使用
const { app } = require('electron');
const { createRequire } = require('module');
const nodeRequire = createRequire(__dirname);

const absolutePath = `${app.getPath('userData')}/Plugins/PluginName/Main.tsx`;
// 注意：TSX文件需要先编译为JS，否则Node.js无法直接运行
const pluginModule = nodeRequire(absolutePath);

解释：module.createRequire是Node.js官方提供的创建原生模块加载器的方法，完全不受Webpack影响，能直接读取文件系统中的模块。

2. 配置Webpack将插件目录设为外部依赖 #

在Webpack配置的externals中加入插件目录的规则，让Webpack不对该路径的模块进行打包，直接交给Node.js处理：

// webpack.main.config.js
const { app } = require('electron');
module.exports = {
  // 其他配置...
  externals: [
    function ({ request }, callback) {
      const pluginDir = `${app.getPath('userData')}/Plugins/`;
      if (request.startsWith(pluginDir)) {
        // 告诉Webpack用commonjs规范加载该模块
        return callback(null, `commonjs ${request}`);
      }
      callback();
    }
  ]
};

配置后，直接用require(absolutePath)就能加载插件，Webpack会自动跳过对该路径的打包处理。

3. 关于__non_webpack_require__的问题 #

这个变量是Webpack提供的原生require别名，但它有两个限制：

• 仅在Webpack编译后的代码中可用，且需要确保Webpack配置没有通过tree-shaking移除它；
• 渲染进程中默认禁用Node.js API，直接使用会报错require is not defined，必须在主进程中使用，或在渲染进程中通过IPC通信从主进程间接加载。

插件系统的常规管理方式 #

你把插件放在userData目录的做法是行业常规操作——userData是Electron提供的用户专属可读写目录，适合存放用户自行安装的插件，不会影响应用本身的代码。

常规插件流程包括：

• 要求插件开发者提供编译后的JS代码（不能直接加载TSX，Node.js不支持TSX的直接解析）；
• 主进程扫描Plugins目录，验证插件的合法性（比如检查manifest.json配置文件）；
• 通过原生require或上述方法加载插件模块；
• 渲染进程如需使用插件组件，通过IPC从主进程获取插件信息，再动态加载编译后的插件JS（推荐用contextBridge做安全隔离，避免直接启用nodeIntegration）。

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