Webassembly + Rust의 다양한 빌드 방법.

<script type="module">
import init from "./pkg/bulid.js";
const runWasm = async () => {
  // Instantiate our wasm module
  const bulid = await init("./pkg/bulid_bg.wasm");
  console.log(bulid)
};
runWasm();

<script type="module">
import init from "./pkg/bulid.js";
const runWasm = async () => {
  // Instantiate our wasm module
  const bulid = await init("./pkg/bulid_bg.wasm");
  console.log(bulid)
};
runWasm();

rust를 웹 어셈블리로 빌드하는데에는 다양한 방법이 있다.

lib.rs

extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen(start)]
pub fn greet() {
    alert("Hello World".into());
}

모든 시작은 헬로우 월드가 국룰이다.
해당 러스트 파일은 Hello World를 해당 스크립트가 로드되면 바로 실행되게 하는 구문이다.

우선 빌드 방법 중 가장 기본적인.

wasm-pack build --target web

를 입력하여 빌드를 해보자

대충 해석해보자면 보면 알겠지만 wasm-pack으로 빌드하며 타겟은 웹이란 뜻이다.
해당 방법으로 빌드 하게되면

<script type="module">
import init from "./pkg/bulid.js";
const runWasm = async () => {
  const bulid = await init("./pkg/bulid_bg.wasm");
};
runWasm();
</script>

로 호출 할 수 있다.

ES6의 문법중 하나인 모듈로 불러오는 방법이다.
우선 러스트로 빌드하는 경우 pkg폴더 내에 관련 파일들이 생성되는데 bulid.js를 불러 온다.
뜻에서도 알 수 있겠지만 자동적으로 빌드가 된 wasm에서는 init함수는 기본적으로 포함되어있으며 해당 함수를 실행하여야 정상적으로 실행된다.

웹어셈블리를 활용하는데 ES6 문법이 어색한 사람은 없겠지만
모듈을 활용하지 않고도 호출할수 있다.

wasm-pack build --target no-modules

모듈없이 빌드하는 방법이다.

<script src="./pkg/bulid.js"></script>;
<script>
const { greet } = wasm_bindgen;
let m;
async function runWasm() {
  m = await wasm_bindgen('./pkg/bulid_bg.wasm');
}
runWasm();
</script>

다만 위의 방법으로 빌드 할 시 웹어셈블리내에서 웹어셈블리가 아닌 외부의 스크립트들의 함수를 불러내 사용할 수 없다.

그외에도 nodejs에서도 빌드 할 수 있는 방법이 있으며
모든 기기에 호환되게 빌드 할 수 있는 방법도 있다.
추후에 소개하겠다.