Electron Forge打包依赖未被包含问题及生产环境依赖配置咨询

我基于create-react-app构建Electron应用，主进程使用electron-devtools-installer模块，采用electron-forge进行打包。执行npm run make完成打包后启动应用，出现以下错误：

Error: Cannot find module 'electron-devtools-installer'
但直接运行electron .时无此问题，推测该模块未被纳入打包范围。

虽该模块仅用于开发，可通过逻辑在生产环境忽略，但我想了解：**当生产环境主进程确实需要第三方模块时，如何将依赖纳入打包？**我已将electron-devtools-installer移至package.json的dependencies字段中，但问题仍未解决。

我的package.json配置如下：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "description": "some description",
  "main": "main/init.js",
  "author": "anonymouse",
  "license": "MIT",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "electron-devtools-installer": "^3.2.0",
    "electron-squirrel-startup": "^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "electron-forge start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently -k \"react-scripts start\" \"npm:electron\"",
    "electron": "wait-on tcp:3000 && electron .",
    "package": "react-scripts build && electron-forge package",
    "make": "react-scripts build && electron-forge make",
    "clean:winbuild": "rmdir build /s /q & rmdir out /s /q"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.67",
    "@electron-forge/maker-deb": "^6.0.0-beta.67",
    "@electron-forge/maker-rpm": "^6.0.0-beta.67",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.67",
    "@electron-forge/maker-zip": "^6.0.0-beta.67",
    "concurrently": "^7.4.0",
    "dotenv": "^16.0.3",
    "electron": "^21.1.1",
    "eslint": "^8.25.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.3.0",
    "eslint-plugin-promise": "^6.1.0",
    "eslint-plugin-react": "^7.31.10",
    "wait-on": "^6.0.1"
  },
  "config": {
    "forge": "./forge.config.js"
  }
}

我的forge.config.js配置如下：

module.exports = {
  packagerConfig: {
    ignore: [
      /coverage.*/,
      /node_modules.*/,
      /public.*/,
      /src.*/,
      /\.env|\.gitignore|.*bak|eslint.*|package-lock.*|(?<!build.*)\.txt|(?<!build.*)\.md/
    ]
  },
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'bkkgapp'
      }
    },
    {
      name: '@electron-forge/maker-zip'
    }
  ]
}

核心问题定位 #

你的forge.config.js中packagerConfig.ignore规则包含了/node_modules.*/，这会直接排除整个node_modules文件夹，哪怕依赖在dependencies中也无法被打包进应用，这就是报错的根本原因。

调整打包忽略规则 #

删除/node_modules.*/这条忽略规则，或者针对性排除不需要的模块（比如dev相关的冗余文件），保留dependencies中的依赖：

module.exports = {
  packagerConfig: {
    ignore: [
      /coverage.*/,
      /public.*/,
      /src.*/,
      /\.env|\.gitignore|.*bak|eslint.*|package-lock.*|(?<!build.*)\.txt|(?<!build.*)\.md/
      // 移除 /node_modules.*/，避免排除所有依赖
    ]
  },
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'bkkgapp'
      }
    },
    {
      name: '@electron-forge/maker-zip'
    }
  ]
}

额外优化：区分开发/生产环境逻辑 #

对于electron-devtools-installer这类仅开发环境需要的模块，建议在主进程中通过环境变量判断加载逻辑，同时将其移回devDependencies减少生产包体积：

// main/init.js
if (process.env.NODE_ENV === 'development') {
  const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
  installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));
}

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