打包的 Electron App 找不到节点模块

Question

我有一个使用 electron-forge 设置的电子项目。该应用程序在本地运行良好，我正在尝试将其打包以便在各种操作系统上分发。但是，当我打包和编译应用程序并尝试运行它时，我收到 cannot find module ... 错误，如下所示：

A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'electron-compile'
    at Module._resolveFilename (module.js:470:15)
    at Function.Module._resolveFilename (/usr/lib/my-app/resources/electron.asar/common/reset-search-paths.js:35:12)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/usr/lib/my-app/resources/app/es6-shim.js:4:23)
    at Object.<anonymous> (/usr/lib/my-app/resources/app/es6-shim.js:10:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)

我的构建过程如下：

使用webpack将电子组件打包成一个文件
使用electron-forge

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  target: 'electron-main',
  resolve: {
    extensions: ['.js']
  },
  entry: [`${__dirname}/src/main.js`],
  output: {
    path: `${__dirname}/dist`,
    filename: 'main.js'
  },
  module: {
    exprContextCritical: false,
    rules: [
      {
        exclude: /node_modules/,
        test: /.(ui.js|s?css|html|png|jpe?g|ico|svg)$/,
        use: 'ignore-loader'
      }
    ]
  }
};

forge.config.js

const path = require('path');

module.exports = {
  "make_targets": {
    "win32": ["squirrel"],
    "linux": ["deb"]
  },
  "electronPackagerConfig": {
    "dir": 'dist',
    "ignore": [
      "src/scss",
      ".*scss",
      "README.md",
      ".gitignore",
      ".nvmrc",
      "gulpfile.js",
      "forge.config.js"
    ]
  },
  "electronInstallerDebian": {
    "icon": {
      "scalable": path.join(__dirname, 'src/assets/icons/debian/Icon.svg')
    },
    "productName": "MyProduct"
  },
  "electronWinstallerConfig": {
    "iconUrl": path.join(__dirname, 'src/assets/icons/windows/Icon.ico'),
    "name": "MyProduct"
  }
};

我在这里做错了什么？似乎构建的 electron.asar 不知道 how/where 找到某些 node_modules，但我的印象是它们将包含在 webpack 创建的包中.

Answer 1

您不能将 webpack 用于通过 electron-forge 创建的项目。这不是不可能的事情，但你需要各种自定义配置才能使其工作。

electron-forge是基于electron-compile构造的，在electron进程中注册on-the-fly transpilation hook。当您通过 electron forge 的预设构建脚本构建包时，它将生成正确的依赖集以及您的模块依赖性。 electron-compile 是一个，它是强制要求的依赖项，但您的 webpack 配置破坏了这些。

TL:DR;

electron-forge 有自己的流程
运行 webpack 然后通过 forge pkg 可以破坏东西。

我建议只采用一种方式（在 webpack 与 forge 之间），自定义混合它对于第一次设置来说并不是微不足道的。

Answer 2

有一个新的 webpack 插件可以与 Electron Forge 一起使用，允许您覆盖 Main 和 Renderer 脚本的基础编译。还没有自己测试过，因为我还在弄清楚。

Electron Forge Plugin Webpack

打包的 Electron App 找不到节点模块

Packaged Electron App fails to Find Node Modules

webpack

electron

electron-forge

electron-packager

webpack.config.js

forge.config.js