В этом уроке мы узнаем, как запускать приложения Rust в веб -браузере. Мы создадим простой пакет ржавчины, скомпилируем его в Webassembly (WASM) и интегрируем его в HTML -страницу.

1. Установить Rust ]

сначала вам нужно установить ржавчину. Пожалуйста, обратитесь к официальному руководству по установке Rust:

Руководство по установке Rust . После завершения установки запустите следующую команду, чтобы проверить, успешно ли установка: ]

rustc -version

rustc --version

2. Создать пакет ржавчины

] Далее, создайте новый пакет ржавчины:

]

Cargo New Rust-101-Lib

cargo new rust-101 --lib

—— cargo.toml └-- -src Racy r B

]

├── Cargo.toml
└── src
    └── lib.rs

package.json

в JavaScript.
• lib.rs : основные библиотечные файлы, содержащие код ржавчины.
lib.rs
• file. По умолчанию он содержит пример add функция. Наша цель - назвать эту функцию из веб -приложения.

. , чтобы запустить код ржавчины в Интернете, вам нужно скомпилировать его в Webassembly (wasm). По этой причине установить wasm-pack инструменты: ]

Marge Install Wasm-Pack

]

.

для подключения Rust и JavaScript мы будем использовать wasm-bindgen crate. Update

cargo.toml

cargo install wasm-pack

]

] здесь:

crate-type = ["cdylib"] : настройка пакета для создания динамической библиотеки, совместимой с Webassembly. wasm-bindgen : включить связь между Rust и JavaScript.

[package]
name = "rust-101"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Cargo Build

]

5. Обновить код RAST
• ] src/lib.rs
file, так что
• функцию add можно посетить из Javascript: ]
используйте wasmm_bindgen :: prelude ::*; #[Wasm_bindgen] Pub fn Add (слева: U64, справа: U64) -> U64 { слева направо }

#[wasm_bindgen]

cargo build

запустите следующие команды, чтобы скомпилировать пакет ржавчины в webassembly: ]

wasm-pack build-target web

] ] Эта команда будет:

составленный код ржавчины в webassembly.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left   right
}

создать

pkg/
• каталог, содержащий файл. 6. Использовать сумки в веб -странице
]

создать файл

index.html

в каталоге Project Root.

wasm-pack build --target web

] 7. Окончательная структура проекта

После завершения вышеуказанных шагов, структура вашего проекта должна быть показана ниже:

]]
. . . X ─ ─ index.html ├-- -pkg │ aDyad package.json │ uí rust_101.d.ts │ uí rust_101.js │ uí rust_101_bg.wasm │ uí rust_101_bg.wasm.d.ts └-- -src Racy r B
]
• . , чтобы запустить веб -страницу, вам необходимо использовать локальный веб -сервер для предоставления услуг. Вы можете использовать любой веб -сервер, который вам нравится, такой как расширение живого сервера (VS Code).
В консоли браузера (CTRL Shift J или CMD Option J), вы должны увидеть:

]

5 10 = 15 Вот и все! Я надеюсь, что этот урок вам поможет. Пожалуйста, поделитесь своими отзывами или вопросами в любое время!

см.

скомпилирован из Rust в Webassembly