使用Webpack和Electron Forge时如何在worker_threads中导入JS文件

问题描述 #

基于Electron Forge的Webpack模板开发时，通过worker_threads创建的Worker无法导入本地依赖模块，运行时报错Cannot find module './dependency'。主进程可正常调用该模块，但Webpack构建后的Worker代码未包含依赖模块，导致Worker无法加载依赖。

原因分析 #

1. Webpack 5对worker_threads的官方支持要求Worker使用ESM语法，而Electron Forge默认配置为CommonJS，导致Webpack无法识别并打包Worker的依赖。
2. 默认Webpack配置未对Worker文件做单独处理，未将Worker的依赖打包进最终产物。

解决方案 #

步骤1：将Worker文件改为ESM语法 #

修改src/dependencyWorker.js，用import替代CommonJS的require：

import { doAThing } from './dependency.js';

doAThing("dependencyWorker");

步骤2：安装并配置worker-loader #

1. 安装依赖：

npm install worker-loader --save-dev

2. 在项目根目录创建/修改webpack.main.config.js，添加Worker文件的打包规则：

module.exports = {
  module: {
    rules: [
      // 保留原有规则
      {
        test: /native_modules[/\\].+\.node$/,
        use: 'node-loader',
      },
      {
        test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
        parser: { amd: false },
        use: {
          loader: '@vercel/webpack-asset-relocator-loader',
          options: {
            outputAssetBase: 'native_modules',
          },
        }
      },
      // 添加Worker处理规则
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.json']
  }
};

步骤3：修改主进程创建Worker的方式 #

在src/main.js中，通过worker-loader导入Worker，替代直接用文件路径创建：

const { app } = require('electron');
const { doAThing } = require('./dependency');
// 通过worker-loader导入Worker
const DependencyWorker = require('./dependencyWorker.js');

const createDependencyWorker = () => {
  return new Promise((resolve, reject) => {
    try {
      const worker = new DependencyWorker();
      // 监听Worker事件
      worker.on('message', () => resolve());
      worker.on('error', reject);
      worker.on('exit', code => {
        if (code !== 0) reject(new Error(`Worker exited with code ${code}`));
      });
    } catch (err) {
      reject(err);
    }
  });
}

app.whenReady().then(async () => {
  await doAThing("main");
  await createDependencyWorker();
  app.quit();
});

步骤4：更新Electron Forge配置 #

修改forge.config.js，确保主进程Webpack配置指向我们修改的文件：

module.exports = {
  packagerConfig: {},
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-webpack',
      config: {
        mainConfig: './webpack.main.config.js', // 指向自定义Webpack配置
        renderer: {
          entryPoints: [
            {
              html: './src/index.html',
              js: './src/renderer.js',
              name: 'main_window',
            }
          ]
        }
      }
    }
  ]
};

验证 #

重新执行npm start，控制台将输出：

do a thing using main
do a thing using dependencyWorker

Worker可正常导入并执行依赖模块，无报错。

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