这篇文章上次修改于 3 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
说起 Electron,大家能定不会感觉到陌生,庞大的体积,内置浏览器,Hello World 都有 200+M... 我个人是很反感跨段应用的,虽然对于开发来说,节省了很多时间,但是站在用户的角度来讲,体验就不是那么称心如意了。但是最近一些业务需要用到 Electron,折腾过程中也踩了不少坑,总结一下。
开发环境的搭建
平时我们在开发前端应用时,一般都是使用 Webpack 去打包,在开发环境中,也是由 Webpack dev server 来实现 HMR。在 Electron 中也是可以使用 Webpack 的。
我们使用
electron-wepack
包,简单搭建一下环境。然后我们参考这个项目结构建立目录:
src
目录下的分别为存放 Electron 主进程逻辑(main) 和 渲染层(renderer)。入口文件必须为 index
或 main
TypeScript 支持 (可选)
安装完以上依赖,
electron-webpack
会识别支持 TypeScript。渲染层
在
src/renderer/index.ts
中,你可以操作 DOM 树。electron-wepack
默认会提供一个空白的 HTML 文档,只有一个 #app
节点供你使用,你无法通过一般操作自定义一个入口 index.html
, 但是你也可以用其他手段达到这个目标,在此不多赘述 (参看 issue)。主进程
在
src/main/index.ts
中, 简单建立一个 app其次是
window.ts
,建立一个 window脚本
在
package.json
中添加。执行
yarn start
。发现正确显示了 Hello World。
使用
yarn package
来生成 dmg 也是没有问题的。一般教程到此就结束了,但是我们的需求并不是这么简单,我们还需要配置其他,比如 app version,app icon,app sign key... 而这些配置也有很多坑。配置
图标
应用图标需要不同大小的几张 png 以及 icns 等格式的图片,手动操作比较麻烦,我们可以用一张 png 去生成,使用
electron-icon-builder
工具就能轻松转换到我们想要的结果。把生成的文件放入
resources
文件夹内,如不存在则新建。
在
package.json
中加入 build
字段,用于配置 electron-builder
。这里是个大坑,因为我们自定义了配置,覆盖了原来
electron-webpack
的配置,所以有几个地方是必须要这么写的,否则就会在打包之后无法显示 renderer 或者 找不到入口文件。这是我自己摸索出来的,比较 hack 的方法。因为我实在找不到答案。如果你需要使用
__static
常量的话,最后,附上 GitHub 地址:
https://github.com/Innei/electron-typescript-starter
https://github.com/Innei/electron-typescript-starter
文章标题:
文章作者:
文章链接: [复制]
最后修改时间:
商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,未经站长允许不得对文章文字内容进行修改演绎。
本文采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
亲亲留个评论再走呗
正在加载评论区...