在电子锻造 + webpack 应用程序中使用电子构建器构建的应用程序显示空白屏幕

Question

我想在我的电子锻造（webpack-template 和 React）应用程序中使用电子构建器，因为有更多的打包选项

电子锻造应用程序是用

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();
};

这是我的文件夹结构

Answer 1

此模板不适用于电子制造商。

因为此模板旨在与电子锻造 make 命令一起使用。 电子构建器无法使用它，因为它使用 webpack 开发服务器而不是构建静态构建。 我链接的模板正在与电子构建器一起使用，因为它正在静态构建反应、反应组件和您使用的节点模块，并且电子构建器可以使用它。

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