Rust에서 처음으로 간단한 WebAssembly 시작

4393 단어 wasmWebAssemblyRust
이 기사의 내용은 그다지 실용적이지는 않지만 우선 브라우저에서 WebAssembly가 움직이는 것을 확인하고 싶은 사람을 위해

전제



Rust의 최신 버전이 설치되어 있음
본 기사를 집필 시점에서는 1.31.1이 최신이었다

빌드 타겟 확인



터미널에서 다음 명령을 치면 빌드 타겟 목록을 볼 수 있습니다.
# rustup target list

이 중 WebAssembly와 관련된 것은 다음 세 가지입니다.
asmjs-unknown-emscripten
wasm32-unknown-emscripten
wasm32-unknown-unknown

이번에는 wasm32-unknown-unknown을 사용하여 이야기를 진행해야합니다.
빌드 타겟 추가 명령은 다음과 같습니다.
# rustup target add wasm32-unknown-unknown

이번 간단한 방법으로 cargo는 이용하지 않고 직접 rs 파일을 생성, 컴파일한다
실행 예로서 1에서 10까지의 합을 반환하는 함수

test.rs
#[no_mangle]
pub fn sum_from1_to10() -> i32 {
    let mut sum = 0;
    for i in 1..=10 {
        sum += i;
    }
    sum
}

이에 대한 컴파일은 다음 명령으로 수행됩니다.
rustc --target wasm32-unknown-unknown -O test.rs --crate-type=cdylib

컴파일 후 test.wasm이라는 파일이 있기 때문에 이것을 적절한 웹 서버의 문서 아래에 배치합니다.
같은 위치에 다음 HTML 파일 준비

index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <script>
fetch('test.wasm')
    .then((response) => response.arrayBuffer())
    .then((bytes) => WebAssembly.instantiate(bytes, {}))
    .then((results) => {
        const instance = results.instance;
        console.log(instance.exports.sum_from1_to10());
    });
        </script>
    </head>
    <body>
    </body>
</html>

브라우저에서 액세스할 때 콘솔에 다음과 같이 55가 표시되면 일단 성공


참고



Rust 단독으로 WebAssembly 컴파일하기 (Emscripten 없음)

좋은 웹페이지 즐겨찾기