从一个Electron项目说起
这两天在折腾用Electron来写一个弹幕助手,方便用PC直播的主播能够看到用户发的弹幕并且进行回复和相关管理操作。
主要的开发任务就是对PC站点已有功能的搬迁和调整。
在最后实现退出功能的时候,希望是在菜单栏上有一个退出按钮,用户点击就能直接退出。
下面是mainProcess里面配置菜单的代码,针对退出登录
按钮注册了事件,点击的时候,通知对应的web页去实现退出登录功能。
const template = [
{
label: '操作',
submenu: [
{
label: '关闭助手',
role: 'quit'
},
{
label: '退出登录',
click: function(){
mainWindow.webContents.send('main-process-message', '{action: "quit-login"}');
}
}
]
}
];
然后是renderProcess这边监听事件并对应处理
const ipc = require('electron').ipcRenderer;
ipc.on('main-process-message', (event, data) => {
switch(data.action) {
case "quit-login":
user.quit();
console.log('quit');
break;
}
});
一个意外的错误
项目这块,renderProcess的代码都是用webpack进行编译的。
在renderProcess里面引入electron
模块之后,立马就报了一个问题:
ERROR in ./~/.1.6.2@electron/index.js
Module not found: Error: Can't resolve 'fs' in '/xxx/electron-quick-start/node_modules/.1.6.2@electron'
@ ./~/.1.6.2@electron/index.js 1:9-22
@ ./js/index.js
上网看了一圈,发现github上的webpack项目里面有人遇到了类似的问题:
Error: Cannot resolve module ‘fs’ with electron and js
然后底下有人给出了解决方式,在webpack.config.js
里面加上target: 'electron'
就可以的。
试了一下,发现果然是可以的。
深入了解target属性
解决问题之后,出于好奇,就去webpack官网看了target
配置的文档。
webpack可以为js的各种不同的宿主环境提供编译功能,为了能正确的进行编译,就需要开发人员在配置里面正确的进行配置。
默认情况下,target
的值是_web_,也就是为类浏览器的环境提供编译。
完整的target属性值及对应作用的列表如下:
拷贝自https://github.com/webpack/webpack.js.org/edit/master/content/configuration/target.md)
target
Description
async-node
Compile for usage in a Node.js-like environment (uses fs
and vm
to load chunks asynchronously)
atom
Alias for electron-main
electron
Alias for electron-main
electron-main
Compile for Electron for main process.
electron-renderer
Compile for Electron for renderer process, providing a target using JsonpTemplatePlugin
, FunctionModulePlugin
for browser environments and NodeTargetPlugin
and ExternalsPlugin
for CommonJS and Electron built-in modules.
node
Compile for usage in a Node.js-like environment (uses Node.js require
to load chunks)
node-webkit
Compile for usage in WebKit and uses JSONP for chunk loading. Allows importing of built-in Node.js modules and nw.gui
(experimental)
web
Compile for usage in a browser-like environment (default)
webworker
Compile as WebWorker
所以,把target
设为electron,也就能正确的对Electron环境下的代码进行编译了,不过我的代码是写在renderProcess里面的,所以把targets
设置为electron-render
才是更加合理的选择。