Tauri 與 Electron

江辰發表於2022-04-09

Tauri

什麼是 Tauri ?

Tauri 是一個為所有主流桌面平臺構建小型、快速二進位制檔案的框架。開發人員可以整合任何編譯成 HTML、 JS 和 CSS 的前端框架來構建他們的使用者介面。應用程式的後端是一個 Rust 二進位制檔案，具有前端可以與之互動的 API。

安裝方式

Xcode

$ xcode-select --install

Rust

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

安裝過程中如果報錯 curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

需要開啟代理：

# 7890 和 789 需要換成你自己的代理埠
$ export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:789

要確保 Rust 已成功安裝，請執行以下命令

$ rustc --version

$rustc 1.59.0 (9d1b2106e 2022-02-23)

啟動一個新的 Tauri

$ yarn create tauri-app

建立專案的時候，如果報錯 An unexpected error occurred: "https://registry.yarnpkg.com/create-vite: tunneling socket could not be established

同樣的，需要開啟代理，使用：

$ yarn config set proxy http://username:password@host:port
$ yarn config set https-proxy http://username:password@host:port

按照說明選擇您喜歡的 Web 前端框架，create-tauri-app 根據您的輸入建立模板專案，之後你可以直接去檢查 tauri info

啟動

$ yarn tauri dev

打包

$ yarn tauri build

Electron

什麼是 Electron ?

Electron 框架允許您使用 JavaScript、HTML 和 CSS 編寫跨平臺的桌面應用程式。它基於Node.js和 Chromium，並被Atom 編輯器和許多其他應用程式使用。

安裝方式

建立專案

$ mkdir my-electron-app && cd my-electron-app
$ yarn init

修改 package.json，"main" 欄位為 main.js，你的 package.json 應該是如下樣子：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jiang Chen",
  "license": "MIT"
}

Electron

$ yarn add --dev electron

執行 Electron。在 package.json 配置欄位 scripts，新增 start 如下命令

{
  "scripts": {
    "start": "electron ."
  }
}

根目錄新增 main.js

程式碼如下

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

根目錄新增 index.html

程式碼如下

<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

根目錄新增 renderer.js

程式碼如下

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

啟動

$ npm run start

打包

新增 Electron Forge 作為應用程式的開發依賴項

$ cnpm install --dev @electron-forge/cli
$ npx electron-forge import

make使用 Forge 的命令建立一個打包

$ yarn run make

兩者區別

  1. 大小對比
  • Electron 官方介紹有提到，它基於 Node.js 和 Chromium，很明顯的問題，包太大（62.5mb）使用 Chromium 的決定，也是解決 WebView 暫時無法解決的一些相容性問題
  • Tauri，前端是通過系統的 WebView2，後端使用 Rust，包很小（4.32MB）
  1. 官方文件
  • Electron 官方文件和社群迭代，目前比較穩定，釋出了多個版本，可以穩定在生產使用
  • Tauri 作為一款新型桌面端開發框架，1.0.0 版本暫時未出，可以持續關注，嘗試做些小工具

總結

Tauri 作為一款新型桌面端開發框架，踩在了 Rust 和 WebView2 的兩位巨人的肩膀上，可以說是時代的產物，Rust 近幾年非常受歡迎，Deno 採用 Rust，微軟擁抱 Rust 等，微軟又開始推廣 WebView2，天然的優勢

結語

如果你覺得這篇內容對你挺有啟發，別忘記點贊 + 關注

歡迎新增我的個人微信：Jiang9684，備註暱稱 + [崗位或專業]，例項 Faker-前端，通過更快噢，一起交流前端技術

相關文章