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不知道如何/在哪里找到某些node_modules，但我的印象是它们将包含在由webpack创建的包中。

Answer 1

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

electron-forge是基于electron-compile构建的，它在电子过程中注册即时的转换钩子。当您通过电子伪造的预设构建脚本构建包时，它将生成正确的依赖集以及您的模块依赖性。 electron-compile是一个，它是必需的依赖项，但你的webpack配置会破坏它们。

TL：DR;

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

我建议只采取一种方式（在webpack与forge之间），自定义混合它对于首次设置并不是一件容易的事。

Answer 2

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

Electron Forge Plugin Webpack

打包的电子应用程序无法查找节点模块

webpack.config.js

forge.config.js

2 个答案: