简介
从前端的角度来理解:Electron 是 web 除了浏览器运行环境外的另一个运行环境,只是它还包含了 Node 的环境与操作系统与原生 API 环境。
官方:Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。 这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行,或者通过 Mac App Store 或微软商店进行分发。 通常,你可以使用操作系统 (OS) 特定的本地应用程序框架来创建一个桌面应用程序。 Electron 可以使用你了解的技术来编写应用程序。
环境准备
Mac 上,只需要安装 Node.js 即可
建议您安装最新可用的
LTS
或Current
版本。
在 windows 上,一个完整的环境就麻烦的多了,具体如下:
创建最简单的项目
上面我们说到 Electron 其实就是 web 的一个运行环境而已,那 web 运行在哪儿呢?
结合上方所述的 Demo,其实 Electron 的运行流程大概如下:
yarn dev
启动应用,运行入口文件main.js
。- 通过
electron 系统原生 api
:BrowserWindow
打开一个系统窗口。
const win = new BrowserWindow({
width: 800,
height: 600
})
- 窗口中加载一个网页:
win.loadURL('https://www.baidu.com')
- loadURL 既可以加载一个网页,也可以加载一个本地 Html 文件。
- loadFile 只可以夹在一个本地的 Html 文件。
- loadURL 和 loadFile 在写法上有差异,一般我们使用 loadURL 就行,更多差异可以查看官方 API 文档:www.electronjs.org/docs/api/br…
综上所述:
- Web 运行在 Electron 的一个窗口里。
也许到这里你有疑惑,就是开发 Electron 和开发 Web 整体上有哪些差异呢?
创建 Electron + React + Ts + Webpack + Electron-builder 项目
在具体的业务项目中,最基本的 demo 远远不能满足需求,我们更多的可能是需要和前端框架结合,因此,下面是基于 react 的项目的完整构建流程。
在创建 electron 项目时,我们可以:
- 首先创建 Web 应用,比如:create-react-app
- 集成 electron
- 做 webpack 相关配置
- 做构建相关配置
具体如下:
当然,这块也有对应的开源项目:
直接使用开源的模板,一个是里面存在着许多模板性的东西,不知道是不是需要的,另一方面,一些配置,也不是很明白其作用。还有就是,这样的模板项目,其框架升级后,也没法享受其带来的好处,除非照着把自己的项目都改一遍,还是挺复杂的。比如这个开源项目其实结构变动就挺大的。越来越接近 web 开发的结构。