苦難
タウリとは何ですか？
Tauri は、すべての主要なデスクトップ プラットフォーム向けの小型で高速なバイナリを構築するためのフレームワークです。開発者は、HTML、JS、CSS にコンパイルできるフロントエンド フレームワークを統合して、ユーザー インターフェイスを構築できます。アプリケーションのバックエンドは、フロントエンドが対話できる API を備えた Rust バイナリです。
設置方法
Xcode
$ xcode-select --install
さび
$ 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)
新しいタウリを始める
$ 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 フレームワークを使用すると、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"
}
電子
$ 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
2つの違い
-
サイズを比較してください
-
Electron の公式紹介では、Node.js と Chromium をベースにしていると述べられていましたが、明らかな問題はパッケージが大きすぎる (62.5mb) ことであり、Chromium を使用する決定は、WebView では一時的に解決できない互換性の問題を解決するためでもありました。
-
Tauri、フロントエンドはシステムの WebView2 を介し、バックエンドは Rust を使用し、パッケージは小さい (4.32MB)
-
公式文書
-
Electron の公式ドキュメントとコミュニティのイテレーションは現在比較的安定しており、複数のバージョンがリリースされており、本番環境でも安定して使用できます。
-
Tauri は新しいデスクトップ開発フレームワークです。バージョン 1.0.0 はまだリリースされていません。引き続き注目して、いくつかの小さなツールを作成してみることができます。
要約する
Tauri はデスクトップ側の新しい開発フレームワークとして、Rust と WebView2 の二大巨頭を肩を並べて登場しました。時代の産物と言えます。近年、Rust は非常に人気があります。Deno は Rust を採用し、 Microsoft は Rust を採用、WebView2 の推進を開始、当然の利点
エピローグ
このコンテンツがあなたにとって非常に刺激的だと思われる場合は、「いいね」とフォローを忘れないでください
私の個人的な WeChat の追加へようこそ: Jiang9684、コメント ニックネーム + [役職または職業]、例 Faker-フロントエンド、パスを速くする、フロントエンド テクノロジーを一緒に交換しましょう