客户端开发(Electron)加入webpack
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命令:
{ "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')
复制代码
- 通过命令来启动项目看一下:
如何使用TypeScript?
安装开发依赖:yarn add typescript electron-webpack-ts --dev
;
在项目根目录配置tsconfig.json
;
{
"extends": "./node_modules/electron-webpack/tsconfig-base.json"
}
复制代码
- 我们改造渲染进程代码来验证ts文件可以被正常解析。
// 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
大量的遗留问题对于一个刚入门学习的我来说觉得并不友好,感觉坑不会少,需要慎用。
相关文章
- 个人笔记(路由、网络相关)
- 个人笔记(vue篇)
- 怎么去水印不伤原图?这个去水印方法值得收藏!
- 羊了个羊,通关秘籍!
- 实用 | 盘点抓包修改响应结果的 2 种方式!
- 小技巧 | Chrome 插件如何完成剪切板的操作!
- DDOS攻击讲堂
- 思科交换机简单配置
- 实战 | 如何利用 Scrapy 编写一个完整的爬虫!
- 超简单就可做一款三功能的LED车灯
- 实战 | 教你快速爬取热门股票,辅助量化交易!
- 行业趋势|光伏行业SCM供应链数字化管理优势、价值
- 破除上下游梗阻,如何为能源化工行业开出“新良方”?
- 软件分享 | 第一期 Markdown神器Typora安装和破解教程
- jira-dev-tool插件安装失败的解决方法
- 软件分享 | 第二期 截图神器snipaste安装和使用教程
- 基于Hexo搭建静态博客
- 软件分享 | 第三期 搜索神器listary安装和使用
- 发送HTML模板邮件
- 使用3-hexo主题时无法正常渲染html代码