So erstellen Sie Ihren ersten WebAssembly-Code mit Rust
Apr 09 2023
In diesem Artikel beschreiben wir, was zu tun ist, um Ihren ersten WebAssembly-Code zu erstellen. Nehmen wir an, Sie haben bereits etwas von WebAssembly gehört, aber noch nicht Ihren ersten Code mit dieser Technologie geschrieben.
In diesem Artikel beschreiben wir, was zu tun ist, um Ihren ersten WebAssembly-Code zu erstellen.
Nehmen wir an, Sie haben bereits etwas von WebAssembly gehört, aber noch nicht Ihren ersten Code mit dieser Technologie geschrieben.
Im Moment werden wir ein einfaches Starterpaket erstellen. Ich habe mich für die Kombination mit der Programmiersprache Rust entschieden , weil sie attraktiv ist.
Lassen Sie es uns ohne weiteres tun.
Installieren Sie Rost und Fracht
Rust: Multi-Paradigma, High-Level, Allzweck-Programmiersprache (https://www.rust-lang.org/)
Cargo: das Rust-Build-Tool und Paketmanager (https://crates.io/)
Cargo.toml-Datei initialisieren
cargo init --name rust_wasm_starter --lib
# Cargo.toml
[package]
name = "rust_wasm_starter"
version = "0.1.0"
edition = "2021"
[dependencies]
cargo add wasm-bindgen
# Cargo.toml
[package]
name = "rust_wasm_starter"
version = "0.1.0"
edition = "2021"
[dependencies]
wasm-bindgen = "0.2.84"
cargo install wasm-pack
[lib]
crate-type = ["cdylib", "rlib"]
use wasm_bindgen::prelude::wasm_bindgen;
#[wasm_bindgen]
pub fn add(a: usize, b: usize) -> usize {
return a + b
}
wasm-pack build --release --target web
npm init
// package.json
{
"name": "rust-wasm-starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {},
"author": "",
"license": "ISC"
}
npm i http-server --save
"scripts": {
"start": "http-server -a localhost -p 5200",
"build": "wasm-pack build --release --target web"
}
import init from "./pkg/rust_wasm_starter.js";
import {add} from "../pkg/rust_wasm_starter.js";
function run() {
console.log(add(5, 5));
}
init().then(run)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rust Wasm Starter</title>
<script type="module" src="./index.js"></script>
</head>
<body>
See the result in the console.
</body>
</html>
npm run start
Starting up http-server, serving ./
http-server version: 14.1.1
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none
Available on:
http://localhost:5200
Hit CTRL-C to stop the server
Wenn Sie Probleme haben, das Projekt zum Laufen zu bringen, sehen Sie sich mein GitHub-Repository an
![Was ist überhaupt eine verknüpfte Liste? [Teil 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
