Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
今天我们将在前端开发中最为常见webpack加入到Electron中,因为GUI引用不同于传统的Web前端项目,所以webpack的配置会相对繁琐,这里我们主要用到了electron-webpack,但是要说明的是,这个项目因作者时间不够充足已经有挺长时间没有更新了,同时在也寻找一起维护的作者,所以今天的案例一定要注意所安装依赖的版本。
mkdir electron-webpack-demo && cd .\electron-webpack-demo && npm init
;yarn add electron-webpack electron webpack@4 --dev
,目前不支持webpack5
;yarn add source-map-support
{ "dev": "electron-webpack dev" }
webPreferences
属性中需要开启nodeIntegration
,并同时禁用掉contextIsolation
,否则你会发现如下报错信息;loadFile
变成了loadURL
,启动的端口我们通过环境变量来读取。const { app, BrowserWindow } = require("electron");
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences:{
nodeIntegration:true,
contextIsolation: false
}
});
const url = `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`;
mainWindow.loadURL(url);
}
app.whenReady().then(() => {
createWindow();
app.on("activate", function () {
if (BrowserWindow.getAllWindows.length === 0) createWindow();
});
});
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});
复制代码
document.write('hello electron webpack')
复制代码
安装开发依赖:yarn add typescript electron-webpack-ts --dev
;
在项目根目录配置tsconfig.json
;
{
"extends": "./node_modules/electron-webpack/tsconfig-base.json"
}
复制代码
// index.ts
class WriterContent {
write(content: string) {
document.write(content);
}
}
new WriterContent().write("hello electron webpack");
复制代码
目前我们启动项目后一直都使用的是由插件提供的默认页面,我们也可以配置一份自定义的入口页面。
package.json
,并新增页面到配置的目录;"electronWebpack": {
"renderer": {
"template": "src/renderer/index.html"
}
}
在static目录新增一个名为dict.json
的文件;
在渲染进程代码中增加如下内容:
// 必须添加,要不ts代码不识别__static
declare const __static: string;
// 主进程和渲染进程读取方式一致
const dicts = fs.readFileSync(path.join(__static, "dict.json"), "utf-8");
console.log("dicts :>> ", dicts);
先来安装一下用来打包的开发依赖吧,避免下载过慢,我们直接设置镜像安装:
npm i --save-dev electron-builder --registry=https://registry.npmmirror.com/
配置"app:dir": "electron-builder --dir"
命令,用来构建应用后直接输出而不生成安装文件;
配置"app:dist": "electron-builder"
命令,用来构建应用后输出安装文件用于分发;
为了达到可分发的标准还需要配置一些其他信息,具体参照https://www.electron.build/来配置。
到此我们的执行命令后生成的文件打开得到的是白屏的状态,我们需要做最后一步处理,调整正式模式下的loadURL
:
if (process.env.NODE_ENV !== "production") {
const url = `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`;
mainWindow.loadURL(url);
} else {
mainWindow.loadURL(
format({
pathname: path.join(__dirname, "index.html"),
protocol: "file",
slashes: true,
})
);
}
electron-webpack的使用初次并不顺畅,下载慢,编译报错等等,相关的资料也不多,还有长期不更新导致与现有的一些依赖脱节的问题,还有issues
大量的遗留问题对于一个刚入门学习的我来说觉得并不友好,感觉坑不会少,需要慎用。