如何使用 aurelia 让 webpack 与电子一起工作？

Question

现在我只是想将电子添加到基本的 hello world 应用程序中（好吧，我确实在 aurelia cli 中调整了一些选项，但它仍然只是在 hello world webpack+typescript 中）。

我目前的尝试是使用webpack-electron，我得到的是一个白屏死机。我也可以得到一个黑屏死机，如果我排除渲染器，在这种情况下它找不到任何资源文件，它在错误的路径中寻找它们。

这是我的src/main/app.ts

import { app, BrowserWindow } from "electron";
import * as path from "path";

let mainWindow: Electron.BrowserWindow;

const isDevelopment = process.env.NODE_ENV !== 'production';

function createWindowUrl(url) {
  const prefix = isDevelopment
    ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`
    : `file://${__dirname}`;

  return `${prefix}/${url}`;
}

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      nodeIntegration: true,
    }
  });


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

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

  // Emitted when the window is closed.
  mainWindow.on("closed", () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed.
app.on("window-all-closed", () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // On OS X it"s common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app"s specific main process
// code. You can also put them in separate files and require them here.

还有我的src/renderer/main.ts https://medium.com/kendraio/using-angular-with-electron-webpack-b9763903823c 肯定是错误的

import {} from "../main"

我真的不在乎我是否使用webpack-electron，但是我如何让 aurelia 以一种同时保留正常网站/服务器代码的方式使用电子？

版本，但我怀疑它们是否重要

Calebs-MBP:warmaster calebcushing$ yarn list --depth=0 --pattern "^webpack|^aurelia|^electron"
yarn list v1.21.1
├─ aurelia-animator-css@1.0.4
├─ aurelia-binding@2.5.2
├─ aurelia-bootstrapper@2.3.3
├─ aurelia-cli@1.2.3
├─ aurelia-dependency-injection@1.5.2
├─ aurelia-event-aggregator@1.0.3
├─ aurelia-framework@1.3.1
├─ aurelia-history-browser@1.4.0
├─ aurelia-history@1.2.1
├─ aurelia-hot-module-reload@0.2.1
├─ aurelia-loader-default@1.2.1
├─ aurelia-loader-webpack@2.2.1
├─ aurelia-loader@1.0.2
├─ aurelia-logging-console@1.1.1
├─ aurelia-logging@1.5.2
├─ aurelia-metadata@1.0.6
├─ aurelia-pal-browser@1.8.1
├─ aurelia-pal@1.8.2
├─ aurelia-path@1.1.5
├─ aurelia-polyfills@1.3.4
├─ aurelia-route-recognizer@1.3.2
├─ aurelia-router@1.7.1
├─ aurelia-task-queue@1.3.3
├─ aurelia-templating-binding@1.5.3
├─ aurelia-templating-resources@1.13.0
├─ aurelia-templating-router@1.4.0
├─ aurelia-templating@1.10.3
├─ aurelia-testing@1.0.0
├─ aurelia-tools@2.0.0
├─ aurelia-webpack-plugin@3.0.0
├─ electron-builder@22.3.2
├─ electron-devtools-installer@2.2.4
├─ electron-publish@22.3.2
├─ electron-to-chromium@1.3.345
├─ electron-webpack-js@2.3.4
├─ electron-webpack@2.7.4
├─ electron@8.0.0
├─ webpack-bundle-analyzer@3.6.0
├─ webpack-cli@3.3.10
├─ webpack-dev-middleware@3.7.2
├─ webpack-dev-server@3.10.3
├─ webpack-log@2.0.0
├─ webpack-merge@4.2.2
├─ webpack-sources@1.4.3
└─ webpack@4.41.5
✨  Done in 1.03s.

Answer 1

所以这可能不是万能的，但我得到了 hello world 以显示在电子中，所以这就是我所做的

TL;DR; 将 webpack.config.js baseUrl 更改为 ''（空字符串）

使用您的包管理器将这些添加到package.json（我不确定是否需要electron-builder）

    "electron": "^8.0.0",
    "electron-builder": "^22.3.2",
    "electron-webpack": "^2.7.4",
...scripts
    "build:electron": "npm run build && electron-webpack app",
    "package:electron": "npm run build:electron && electron-builder",
    "start:electron": "npm run build:dev && electron-webpack dev",
...// electron webpack and builder configuration
  "electronWebpack": {
    "commonSourceDirectory": "dist",
    "staticSourceDirectory": "static",
    "title": true
  },
  "build": {
    "directories": {
      "buildResources": "dist",
      "output": "electron"
    },
    "files": [ // actually include the dist folder
      {
        "from": "dist",
        "to": "dist"
      }
    ]
  },
  "main": "main.js",

然后添加一个src/main/app.ts 和一个src/main/renderer.ts（渲染器将保持一个空文件）

在src/main/app.ts 中添加此代码，它基本上是电子打字稿快速入门代码，只需进行一次更改。刚刚加载的文件../index.html，__dirname 会看错地方。

import { app, BrowserWindow } from "electron";
import * as path from "path";
import { format as formatUrl } from 'url';


let mainWindow: Electron.BrowserWindow;

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
  });
  const isDevelopment = process.env.NODE_ENV !== 'production';

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

  // and load the index.html of the app.
// this conditional is silly, but was the only way I figured out how to have it work in both dev and actually packaging the app
  if (isDevelopment) {
    mainWindow.loadFile(path.relative(__dirname, 'dist/index.html'))
  } else {
    mainWindow.loadURL(formatUrl({
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file',
      slashes: true
    }));
  }

  // Emitted when the window is closed.
  mainWindow.on("closed", () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed.
app.on("window-all-closed", () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // On OS X it"s common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app"s specific main process
// code. You can also put them in separate files and require them here.

然后如前所述更改webpack.config.js 并尝试npm run start 和npm run start:electron，现在两者都应该运行。

Answer 2

为此使用Capacitor 更容易，just follow this document。

然后将electron-builder作为开发者添加到由电容器添加的electron项目中。添加这些脚本来打包您的应用程序，一切顺利。

{
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  }
}