Electron：Web 应用桌面化

时间 2020-02-24

标签 electron web 应用桌面栏目 HTML 繁體版

原文原文链接

前言

软件开发人常常说到：桌面应用 Web 化，Electron 却反其道而行之，这是为何呢？html

每个技术的出现都是为了解决必定的问题。前端

既然要说 Electron，那么了解一下其背景也是颇有必要的。node

诞生

Electron 的出现最初是由于 Github 想要开发一个可编程的文本编辑器 Atom，在开发 Atom 的过程当中，Electron 被做为其框架而诞生。git

历史

2013年4月 Atom Shell 项目启动。
2014年5月 Atom Shell 被开源。
2015年4月 Atom Shell 被重命名为 Electron。
2016年5月 Electron 发布了 v1.0.0 版本。
2016年5月 Electron 构建的应用程序可上架 Mac App Store。
2016年8月 Windows Store 支持 Electron 构建的应用程序。

关于

能够看到 Electron 最初只是 Atom 编辑器的框架，它经过将 Chromium 和 Node.js 合并到同一个运行时环境中，使得开发者可使用 HTML、CSS、JavaScript 这些前端技术栈来开发跨平台的桌面应用程序。github

关键点是：使用前端技术栈，开发跨平台的桌面应用程序。npm

为何用它？

Electron 也算是一种 Hybrid App，因此他开发的 Native 性能体验上确定是不如原生应用的。那为何要用 Electron？为何又要把 Web 应用桌面化？编程

经过搜集的一些资料来看，较为重点的缘由有如下几点：json

须要使用 Native API
拥有离线可用的功能
没有专门的 Native 工程师
须要快速交付

综合考虑来看的话，我认为（并不官方）更加适合开发快速迭代的工具型应用。windows

扩展

类似的技术还有 NW.js。bash

尝鲜

环境与依赖

node
windows 7+
electron

node 安装

目前建议下载安装 12.16.1，这是一个 LTS 版本。

在安装的过程当中，建议将 node 添加到环境变量。

建立一个 electron 的 demo

在一个本身喜欢的位置建立一个文件夹，好比：

# 新建文件夹
mkdir electron_test
# 以后进入文件夹
cd .\electron_test\
# 初始化为一个 npm 项目
npm init -y
# 安装 electron
npm install --save-dev electron
# 验证 electron
npx electron

编辑入口文件

在根目录分别新建文件 main.js 和 index.html。

// index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>hello electron</h1>
</body>

</html>

// main.js
const { app, BrowserWindow } = require('electron')

app.on('ready', () => {
  let win = new BrowserWindow({
    width: 500,
    height: 300
  })
  win.loadFile('index.html')
})

修改 package.json

其余的内容省略掉啦。

{
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

启动

npm start

小结

经过一个简单的尝试，能够看出来 Electron 的技术栈是 Web 前端 友好的，若是你是一名 Web 前端工程师 那么我相信你也会不管如何先来这么一口的。

众所周知的，VSCode 是使用 Electron 开发的一个成功的案例。若是你还不肯定 Electron 适合作些什么，或者想要知道还有哪些成功的案例，你能够查看更多。