在 electron-forge + webpack 应用程序中使用 electron-builder 构建的应用程序显示空白屏幕

Posted 2023-03-22

【中文标题】在 electron-forge + webpack 应用程序中使用 electron-builder 构建的应用程序显示空白屏幕

【英文标题】：App built using electron-builder in electron-forge + webpack application shows blank screen

【发布时间】：2021-02-17 07:47:45

【问题描述】：

我想在我的 electron-forge（webpack-template 和 React）应用中使用 electron-builder，因为有更多的打包选项

electron-forge 应用是用

创建的

create electron-app test --template=webpack

这是我的 package.json

  "name": "vocascan",
  "productName": "vocascan",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": ".webpack/main",
  "scripts": 
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\"",
    "build": "electron-forge start && electron-builder --linux"
  ,
  "keywords": [],
  "build": 
    "productName": "Vocascan",
    "files": [
    ],
    "linux": 
      "target": [
        "AppImage"
      ],
      "category": "Development"
    
  ,
  "license": "MIT",
  "config": 
    "forge": 
      "packagerConfig": ,
      "plugins": [
        [
          "@electron-forge/plugin-webpack",
          
            "mainConfig": "./webpack.main.config.js",
            "renderer": 
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                
                  "html": "./src/index.html",
                  "js": "./src/renderer.jsx",
                  "name": "main_window"
                
              ]
            
          
        ]
      ]
    ,
  "devDependencies": 
    "@electron-forge/cli": "^6.0.0-beta.54",
    "@electron-forge/maker-deb": "^6.0.0-beta.54",
    "@electron-forge/maker-rpm": "^6.0.0-beta.54",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.54",
    "@electron-forge/maker-zip": "^6.0.0-beta.54",
    "@electron-forge/plugin-webpack": "6.0.0-beta.54",
    "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
    "css-loader": "^4.2.1",
    "electron": "10.1.5",
    "node-loader": "^1.0.1",
    "style-loader": "^1.2.1",
    "electron-builder": "^22.9.1"
  ,
  "dependencies": 
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "babel-loader": "^8.1.0",
    "electron-squirrel-startup": "^1.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  

如你所见，我添加了

"build": "electron-forge start && electron-builder --linux"

和

"build": 
    "productName": "Vocascan",
    "files": [
    ],
    "linux": 
      "target": [
        "AppImage"
      ],
      "category": "Development"
    
  ,

为了使电子生成器可用

构建运行良好，但是当我启动应用程序时，我的任何组件都没有显示

---

如果有人需要浏览器窗口代码

const createWindow = () => 
  // Create the browser window.
  const mainWindow = new BrowserWindow(
    width: 800,
    height: 600,
  );

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
;

这是我的文件夹结构

【问题讨论】：

你能解决这个问题吗？

【参考方案1】：

此模板不适用于 electron-builder。

因为这个模板是为使用 electron-forge make 命令而设计的。 electron-builder 无法使用它，因为它使用的是 webpack 开发服务器而不是构建静态构建。 我链接的模板正在与 electron-builder 一起使用，因为它正在制作 react 的静态构建，您使用的 react 组件和节点模块以及 electron-builder 可以使用它。

我推荐这个模板：https://github.com/Levminer/create-electron-react-app

【讨论】：

解释为什么这个模板不起作用。

@Sfili_81 因为这个模板被设计为与 electron-forge make 命令一起使用。并且 electron-builder 不能使用它，因为它使用 webpack 开发服务器而不是构建静态构建。我链接的模板正在与 electron-builder 一起使用，因为它正在制作 react 的静态构建，react 组件和 electron-builder 可以使用它。

请编辑您的答案

@Sfili_81 我添加了解释。