您的位置:时时app平台注册网站 > web前端 > 详解Webpack实战之构建 Electron 应用_javascript技巧

详解Webpack实战之构建 Electron 应用_javascript技巧

2019-12-06 22:58

Have a try!

二个最简易的electron项目满含多个文本:

  • package.json (Node.js项目标配备文件)
  • index.html (桌面应用的分界面页面)
  • main.js (应用的起踏入口文件)

里面,大旨的文件是 ==index.html== 和 ==main.js== 我们能够下载官方的quick start的例子

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

Electron功底文书档案

行使 AngularJS 和 Electron 创设桌面应用

整合React创造Electron桌面应用

Electron 能够让您采纳支付 Web 的才干去支付跨平台的桌面端应用,由 Github 主导和开源,大家耳熟能详的 Atom 和 VSCode 编辑器就是行使 Electron 开荒的。

调用供给:

价值观的PC软件开拓花费太高,和互连网的起来,让守旧的开支稳步被在线系统吊打,高费用必然逐步的落后,那是符合经济上进步的方向,不过出于质量的标题,不管是VTucson依然直播,供给收集录制,音频,网卡音讯,而这个模块大非常多依旧C、C 来博取

历史观局限:
在浏览器里,Web页面常常运转在七个沙盒情形里,它不可能访谈本地的财富。
举个例子说在Web页面里,调用本地GUI是不容许的,因为在Web页面里管理地点GUI财富是老大危急的同一时候特别轻巧诱致能源败露。假诺您想在Web页面举行GUI操作,该Web页面包车型大巴渲染进程必得透过和主进程通讯来呼吁主进度管理那个操作。

在运作 Electron 应用时,会从起步三个主进程开端。主进程的启航是由此Node.js 去实行一个进口 JavaScript 文件贯彻的,那一个进口文件 main.js 内容如下:

Electron的组成

  1. 软件组成:Electron: 1.2.6 Node: 6.1.0 Chromium: 51.0.2704.106 V8: 5.1.281.65

  2. 工具扶助:(官方提供)

    效果上扶助:

    1. Automatic updates
    2. Native menus & notifications
    3. App crash reporting
    4. Debugging & profiling
    5. Windows installers

    写代码&部署:

    Electron Packager — Package your apps

    Electron Builder — Deploy your apps

    Spectron — Test your apps Devtron —

    Debug your apps Electron

    Prebuilt — Install Electron

    Menubar — Create menubar apps

  3. 学习质地:官方网站提供几个相比完善的DEMO,包蕴健康的系统品级操作,通信,截图,调用PDF等例子

  4. 产物:官方网站络点数了无数大家相比熟知的有Atom,VSC,slack

一体化来说开垦 Electron 应用和支付 Web 应用很相符,分化在于 Electron 的运营条件同时内置了浏览器和 Node.js 的 API,在支付网页时除了能够采纳浏览器提供的 API 外,还足以使用 Node.js 提供的 API。

Electron是什么?

官方网址是那般描述的:Build cross platform desktop apps with JavaScript, HTML, and CSS

翻译一下:使用JavaScript,HTML以至CSS搭建跨平台桌面应用

页面部分的代码已经校正造成,接下去更正构建方面包车型客车代码。 这里塑造必要实现以下几点:

落草情况

一人博主那样开玩笑说:
兴许根本是因为,猿类里的亚种——前端开采——又有了新的出路了吗,尚未找职业的前端开垦,又有了新的地点可以去筛选,已经在岗的前端也可以有了新一年的 KPI/OKGL450,刚启航的创办实业公司得以只拉叁个前端就能够支付跨平台的多少个桌面顾客端... ...(开个玩笑)。

JavaScript近几年的全领域前行,从compile once,run everywhere调换为code once,run everywhere,由于JavaScript自个儿的是一门解释性的脚本语言,这让它逐步的形成全宇宙使用最广泛的语言,未有之少年老成。

彩世界网址 1

详解Webpack实战之构建 Electron 应用_javascript技巧_脚本之家彩世界网址。JavaScript只是JavaScript,在浏览器中,它操作DOM和BOM,在服务器端它操作FileSystem,HTTP,所以在任何条件,他都能够试行,尽管是在几M的内部存款和储蓄器意况,这一点对物联网来讲很要紧。

接下去做一个总结的 Electron 应用,供给为利用运行后显得一个主窗口,在主窗口里有一个开关,点击那一个按键后新展现二个窗口,且使用 React 开拓网页。

import React, { Component } from 'react';import { render } from 'react-dom';import { remote } from 'electron';import path from 'path';import './index.css';class App extends Component { // 在按钮被点击时 handleBtnClick() { // 新窗口对应的页面的 URI 地址 const modalPath = path.join('file://', remote.app.getAppPath; // 新窗口的大小 let win = new remote.BrowserWindow({ width: 400, height: 320 }) win.on { // 窗口被关闭时清空资源 win = null }) // 加载网页 win.loadURL // 显示窗口 win.show { return (  Page Index Open Page Login  ) }}render(, window.document.getElementById;

鉴于在网页的 JavaScript 代码里或然会有调用 Node.js 原生模块或然 electron 模块,也正是出口的代码重视那一个模块。但由于那么些模块都是放到扶持的,创设出的代码不能够把那一个模块打包进去。 要完结以上供给很简单,因为 Webpack 内置了对 Electron 的支撑。 只须要给 Webpack 配置文件加上生机勃勃行代码就可以,如下:

本实例提供品类总体代码

接入 Webpack

创设出2个可在浏览器里运转的网页,分别对应2个窗口的分界面;

以上正是本文的全体内容,希望对大家的求学抱有助于,也目的在于大家多都赐教脚本之家。

启航的窗口其实是贰个网页,运营时会去加载在 loadUTiguanL 中盛传的网页地址。 各类窗口都是一个独立的网页进度,窗口之间的通讯供给借助主进度传递新闻。

const { app, BrowserWindow } = require// 保持一个对于 window 对象的全局引用,如果你不这样做,// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭let win// 打开主窗口function createWindow() { // 创建浏览器窗口 win = new BrowserWindow({ width: 800, height: 600 }) // 加载应用的 index.html const indexPageURL = `file://${__dirname}/dist/index.html`; win.loadURL; // 当 window 被关闭,这个事件会被触发 win.on => { // 取消引用 window 对象 win = null })}// Electron 会在创建浏览器窗口时调用这个函数。app.on('ready', createWindow)// 当全部窗口关闭时退出app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd   Q 确定地退出 // 否则绝大部分应用会保持激活 if (process.platform !== 'darwin') { app.quit
target: 'electron-renderer',

那句配置曾在2-7别样配置项-Target中涉嫌,意思是指让 Webpack 创设出用于 Electron 渲染进程用的 JavaScript 代码,也正是这2个窗口须求的网页代码。

彩世界网址,以上修改都完毕后再次执行 Webpack 创设,对应的网页须求的代码都输出到了项目根目录下的 dist 目录里。

应用这种方式支付桌面端应用的优点有:

详解Webpack实战之构建 Electron 应用_javascript技巧_脚本之家彩世界网址。主进度运营后会一向驻留在后台运转,你眼睛所看得的和操作的窗口并不是主进程,而是由主进度新开发银行的窗口子进度。

为了以 Electron 应用的样式运转,还索要安装新信任:

其间最首要的部分在于在按键点击事件里通过 electron Curry提供的 API 去新开拓三个窗口,并加载网页文件所在之处。

是因为 Electron 应用中的每种窗口对应三个网页,所以供给开垦2个网页,分别是主窗口的 index.html 和新开拓的窗口 login.html 。 也正是说项目由2个单页应用组成,那和3-10拘系五个单页应用 中的项目特别相符,让大家来把它退换成叁个 Electron 应用。

详解Webpack实战之构建 Electron 应用_javascript技巧_脚本之家彩世界网址。在项目根目录下新建主进度的入口文件 main.js ,内容和地点提到的同样;

Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览器突显出的 Web 页面作为利用的 GUI,通过 Node.js 去和操作系统人机联作。 当你在 Electron 应用中的贰个窗口操作时,实际上是在操作三个网页。当您的操作要求通过操作系统去实现时,网页会通过 Node.js 去和操作系统人机联作。

利用从起步到退出有意气风发各样生命周期事件,通过 electron.app.on(卡塔尔(قطر‎函数去监听生命周期事件,在特定的天天做出反应。 比如在 app.on 事件中经过 BrowserWindow 去体现应用的主窗口。

设置成功后在品种目录下实践 electron . 你就能够得逞看见运行的桌面应用了,效果如图:

降落开垦门槛,只需调节网页开采本事和 Node.js 就可以,大量的 Web 开荒工夫和现有库能够复用于 Electron; 由于 Chromium 浏览器和 Node.js 都以跨平台的,Electron 能做到写意气风发份代码在分化的操作系统运转。

主窗口网页的代码如下:

# 安装 Electron 执行环境到项目中npm i -D electron

本文由时时app平台注册网站发布于web前端,转载请注明出处:详解Webpack实战之构建 Electron 应用_javascript技巧

关键词: