electron入门及项目搭建及发布(个人实验)

Electron

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。Electron通过将ChromiumNode.js合并到同一个运行时环境中并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

Chromium

Chromium是由Google主导开发的网页浏览器。以BSD许可证等多重自由版权发行并开放源代码,Chromium的开发可能早自2006年即开始。Chromium 是 Google 的Chrome浏览器背后的引擎,其目的是为了创建一个安全、稳定和快速的通用浏览器。

如何搭建?

electron-forge

Electron Forge 是一个用来构建现代化Electron应用的完善的工具。 Electron Forge将多个现有的( 且有稳定维护的 )Electron构建工具整合为一个简单易用的工具包,所有人都可以用它来快速地搭建Electron开发环境。

Forge 将一些流行框架整合为“开箱即用”的模板,比如:React、Vue、Angular等。 Forge 的一些核心模块来自于上层的Electron社区(比如electron-packager),因而Electron主要维护人员(比如说Slack)提交的Electron更新也会使Forge的用户受益。

关于Forge的更多信息,请查阅electronforge.io

electron-react-boilerplate

如果你不希望任何工具,而想要简单地从一个模板开始构建,CT Lin的 electron-react-boilerplate 可能值得一看。 它在社区中很受欢迎,并在内部使用了 electron-builder

搭建的方式有很多,以下为我个人做法:
搭建一个electron结合react、Webpack的项目,首先搭建一个react+Webpack的项目,配置好webpack.config.js,确保可以正确运行调试。(这里省略如何搭建react+Webpack项目)

在项目中安装electron

npm install electron -save-dev

安装完成后,在项目根目录下新建main.js,为electron的启动文件。(可直接从https://github.com/electron/electron-quick-start中复制过来)
Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。

image.png

修改main.js文件,修改mainWindow.loadURL ,这里为了方便调试,直接将路径修改为localhost服务地址。

    mainWindow = new BrowserWindow(windowOptions)
    // mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))
    mainWindow.loadURL("http://localhost:8060/dashboard/dashboardForMaster")

修改package.json文件,在其中修改main指定main.js作为electron的入口文件,start-electron执行命令,用以启动electron。
"main": "main.js",
"start-electron": "electron .",

image.png

运行

完成上述步骤后,即可启动应用。首先启动原react项目 执行命令,在执行electron命令,用以运行electron

npm start
npm run start-electron

启动成功后,将自动弹出electron应用窗口。


image.png

如何调试

渲染进程

最广泛使用来调试指定渲染进程的工具是Chromium的开发者工具集。 它可以获取到所有的渲染进程,包括BrowserWindow的实例,BrowserView以及WebView。 您可以通过编程的方式在BrowserWindow的webContents中调用openDevTool()API来打开它们:

const { BrowserWindow } = require('electron')

let win = new BrowserWindow()
win.webContents.openDevTools()
image.png

主进程

调试主进程有点棘手, 因为您不能简单地打开开发者工具来调试它们。 多亏了谷歌和Node.js的紧密合作,Chromium开发者工具可以被用来调试Electron的主进程,否则你也许会遇到许多怪事就像require不能再控制台中显示。

打包

使用electron-packager进行打包,安装electron-packager

npm install electron-packager -save-dev

在package.json中添加命令,"packager": "electron-packager . --platform=darwin --electron-version=1.0.1 --overwrite",执行打包命令,
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
执行后完成打包,生成本地应用文件,可直接双击启动应用程序。

image.png

注:如项目为单页面应用,man.js需要添加如下代码。

const shouldQuit = app.makeSingleInstance(
  (commandLine, workingDirectory) => {
    if (mainWindow) {
      if (mainWindow.isMinimized()) {
        mainWindow.restore();
      }
      mainWindow.focus();
    }
  }
);

if (shouldQuit) {
  app.quit();
  return;//没有这句话,会报错!
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容