如何使用 aurelia 让 webpack 与 electron 一起工作？
How do I get webpack working with electron using aurelia?
现在我只是想将 electron 添加到基本的 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 以一种同时保留正常 website/server 代码的方式使用 electron？
版本，但我怀疑它们是否重要
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.
所以这可能不是全部，但我得到了要在 electron 中显示的 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 现在两者都应该 运行.
使用 Capacitor for this is far easier, just follow this document.
然后将electron-builder作为dev添加到capacitor添加的electron项目中。添加这些脚本来打包您的应用程序，一切顺利。
{
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder"
}
}
现在我只是想将 electron 添加到基本的 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 以一种同时保留正常 website/server 代码的方式使用 electron？
版本，但我怀疑它们是否重要
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.
所以这可能不是全部，但我得到了要在 electron 中显示的 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 现在两者都应该 运行.
使用 Capacitor for this is far easier, just follow this document.
然后将electron-builder作为dev添加到capacitor添加的electron项目中。添加这些脚本来打包您的应用程序，一切顺利。
{
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder"
}
}