Tauri + Svelte로 Hello World작성

12206 단어 taurisvelte
TauriSvelteでHello World아프리를 만드세요.

環境


  • 운영 체제: macOS Monterey(12.3.1)
  • X코드: 13.1
  • 녹: 1.59.0
  • 노드: 17.8.0

  • % 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対応
    


  • Svelte프로제크동 작사

  • % 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
    


  • Tauri프로제크を初期化
  • Web Assets Location: Frontend의 ​​Production 모드로 ../public
  • Dev Server의 URL: Frontend開発時に使うURL指定. 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
        }
      }
    }
    


  • Tauri아프리모션작가

  • % 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()
    +}
    


  • Svelte의 방법 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
    

    좋은 웹페이지 즐겨찾기