vue+electron渲染进程如何获取electron变量

作者: 张阳君 分类: 前端技术

使用vue+electron开发客户端时,配置开发环境一直都是比较头疼的事情,因为vue-cli创建的项目需要进行一次预编译,在开发过程中会有很多地方和electron冲突。electron的进程分为主进程和渲染进程,vue的整个生命周期就是在渲染进程里运行的,按照官方示例,要在渲染进程里获取electron的api需要把electron变量require进来,如果直接写成const electron = require("electron"),控制台会报错,那么究竟该如何在渲染进程中获取electron变量呢?

electron

错误分析

首先分析一下错误原因,我们用vue-cli创建的代码本质上是源码,需要通过webpack进行编译的,代码中的importrequire会被解析打包,而const electron = require("electron")这段代码也被一起打包了,随后electron执行打包后的代码,发现并无const electron = require("electron")这样的代码片段,然后就报错了。

解决方案

解决方法就是让electron不被打包编译,这里要提到webpack中的一个方法__non_webpack_require__,官方解释是:生成一个不会被 webpack 解析的 require 函数。配合全局可以获取到的 require 函数,可以完成一些酷炫操作,嗯,要的就是这个效果,所以我们统一替换为const electron = __non_webpack_require__("electron");,再跑下代码,完美运行。

__non_webpack_require__是webpack中一个比较冷门的知识点,却很好地调和了vue+electron的开发。当然还有很多其他场景也会用到__non_webpack_require__,欢迎大家在留言区分享经验!

(全文完)

0 条评论
回复
支持 Markdown 语法
暂无评论,来抢个沙发吧!