Так что это, вероятно, далеко не все, но я получил привет, чтобы отобразить в электронном виде, вот что я сделал
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, и оба должны теперь бежать.