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 適合作些什麼，或者想要知道還有哪些成功的案例，你能夠查看更多。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。