Tauri + Svelte로 Hello World작성
環境
% uname -v
Darwin Kernel Version 21.4.0: Fri Mar 18 00:47:26 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T8101
% xcode-select -p
/Applications/Xcode-13.1.app/Contents/Developer
% rustc --version
rustc 1.59.0
% node --version
v17.8.0
% npm --version
8.5.5
Svelte프로제크트작성
https://github.com/sveltejs/templateを参照してSveltesetApp
% mkdir tauri-helloworld
% cd tauri-helloworld
% npm i -D degit
% npx degit sveltejs/template --force
% node scripts/setupTypeScript.js <-- Typescript対応
% npm i
% npm run dev
> svelte-app@1.0.0 dev
> rollup -c -w
rollup v2.70.1
bundles src/main.ts → public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 571ms
[2022-04-03 16:05:28] waiting for changes...
> svelte-app@1.0.0 start
> sirv public --no-clear "--dev"
Your application is ready~! 🚀
- Local: http://localhost:8080
- Network: Add `--host` to expose
────────────────── LOGS ──────────────────
Tauri 프로제크트작성
@tauri-apps/cli
와 @tauri-apps/api
を인스톨% npm i -D @tauri-apps/cli @tauri-apps/api
../public
http://localhost:8080
% npx tauri init
✔ What is your app name? · svelte-app
✔ What should the window title be? · Tauri Hello World
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../public
✔ What is the url of your dev server? · http://localhost:8080
src-tauri/tauri.conf.json
編集build.beforeDevCommand
: npm run dev
build.beforeBuildCommand
: npm run build
{
"package": {
"productName": "svelte-app",
"version": "0.1.0"
},
"build": {
"distDir": "../public",
"devPath": "http://localhost:8080",
- "beforeDevCommand": "",
- "beforeBuildCommand": ""
+ "beforeDevCommand": "npm run dev",
+ "beforeBuildCommand": "npm run build"
},
"tauri": {
"bundle": {
"active": true,
"targets": "all",
"identifier": "com.tauri.dev",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/[email protected]",
"icons/icon.icns",
"icons/icon.ico"
],
"resources": [],
"externalBin": [],
"copyright": "",
"category": "DeveloperTool",
"shortDescription": "",
"longDescription": "",
"deb": {
"depends": [],
"useBootstrapper": false
},
"macOS": {
"frameworks": [],
"useBootstrapper": false,
"exceptionDomain": "",
"signingIdentity": null,
"providerShortName": null,
"entitlements": null
},
"windows": {
"certificateThumbprint": null,
"digestAlgorithm": "sha256",
"timestampUrl": ""
}
},
"updater": {
"active": false
},
"allowlist": {
"all": true
},
"windows": [
{
"title": "Tauri Hello World",
"width": 800,
"height": 600,
"resizable": true,
"fullscreen": false
}
],
"security": {
"csp": null
}
}
}
% npx tauri dev
% npx tauri info
Environment
› OS: Mac OS 12.3.1 X64
› Node.js: 17.8.0
› npm: 8.5.5
› pnpm: Not installed!
› yarn: Not installed!
› rustup: Not installed!
› rustc: 1.59.0
› cargo: 1.59.0
› Rust toolchain:
Packages
› @tauri-apps/cli [NPM]: 1.0.0-rc.7(outdated, latest: 1.0.0-rc.8)
› @tauri-apps/api [NPM]: 1.0.0-rc.3(outdated, latest: 1.0.0-rc.3)
› tauri [RUST]: 1.0.0-rc.6,
› tauri-build [RUST]: 1.0.0-rc.5,
› tao [RUST]: 0.7.0,
› wry [RUST]: 0.14.0,
App
› build-type: bundle
› CSP: unset
› distDir: ../public
› devPath: http://localhost:8080/
› framework: Svelte
› bundler: Rollup
App directory structure
├─ node_modules
├─ public
├─ src-tauri
├─ .git
├─ .vscode
└─ src
Rust Command(을)를 참조하십시오
hello_command
작성// src-tauri/src/main.rs
fn main() {
tauri::Builder::default()
+ .invoke_handler(tauri::generate_handler![hello_command])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
+#[tauri::command]
+fn hello_command(name: String) -> String {
+ return format!("Hello {}!", name).into()
+}
hello_command
を불러오다// src/App.svelte
<script lang="ts">
+ import { invoke } from "@tauri-apps/api";
+
export let name: string;
+ let messagePromise = invoke("hello_command", { name });
</script>
<main>
- <h1>Hello {name}!</h1>
+ {#await messagePromise}
+ <h1>Loading.invoke.</h1>
+ {:then message}
+ <h1>{message}</h1>
+ {:catch err}
+ <h1>{err}</h1>
+ {/await}
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
// src/main.ts
const app = new App({
target: document.body,
props: {
- name: 'world'
+ name: 'Tauri'
}
});
템플릿화시타도노
https://github.com/dannygim/template-tauri-svelte
npx degit dannygim/template-tauri-svelte tauri-svelte-app
Reference
이 문제에 관하여(Tauri + Svelte로 Hello World작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dannygim/tauri-sveltedehello-worldzuo-cheng-47ph텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)