AssemblyScript 은 TypeScript 적인 문법으로 WebAssembly의 .wasm 파일을 출력할 수 있는 도구입니다.

Golang이나 Rust로 WebAssembly를 만들 때와 달리 Runtime 등이 없어 매우 간단합니다. (즉, 필요한 최소한의 기능 만 제공합니다 ...)

TL;DL

아래 URL은 데모 소스 코드입니다. (node.js v8 이상 필수)
htps : // 기주 b. 코 m / 지 rywd ぇ / 아세 mblysc 리 pt

Hands On

프로젝트 초기화

AssemblyScript는 Binaryen을 사용하여 바이너리 파일을 컴파일하므로 환경에 따라 설치에 시간이 걸릴 수 있습니다.

$ npm init
$ npm i -D AssemblyScript/assemblyscript
$ npx asinit .

여기까지는 모르는 것 같습니다.

성공하면 프로젝트 부하는 이런 느낌이 듭니다.

assemblyscript-minimum
|--README.md
|--assembly
|  |--index.ts
|  |--tsconfig.json
|--build
|  |--.gitignore
|--index.js
|--node_modules
|--package-lock.json
|--package.json

컴파일

프로젝트가 초기화되었을 때, assembly/index.ts 라고 하는 샘플 파일이 작성되어, 일단 컴파일 해 봅시다.

$ npm run asbuild

컴파일하면 build/ 아래에서 다음 파일이 생성됩니다.

|--build
|  |--.gitignore
+|  |--optimized.wasm
+|  |--optimized.wasm.map
+|  |--optimized.wat
+|  |--untouched.wasm
+|  |--untouched.wasm.map
+|  |--untouched.wat

간단히 말해, untouched.* 시리즈는 컴파일만 실시해 압축되어 있지 않은 것으로, optimized.* 시리즈는 변수명등을 압축했습니다 (실행하려면 양쪽 모두 함께).*.wasm 는 WebAssembly 바이너리 파일이고 *.wat 는 S 표현식 기반 텍스트 표현입니다.

브라우저에서 실행

index.html을 만들고 optimized.wasm을로드

index.html

<h1>It works!</h1>
<script>
  async function loadWasm(url, opt = {}) {
    const wasmRaw = await fetch(url).then(res => res.arrayBuffer());
    const wasmObj = await WebAssembly.instantiate(wasmRaw, opt);
    return wasmObj;
  }

  loadWasm('build/optimized.wasm', {}).then(wasm => {
    console.log(wasm);
  });
</script>

브라우저에서 확인

프로젝트 아래에서 몇 가지 방법으로 서버를 설정하고 index.html를 확인하십시오.
예를 들어 다음 명령 중 하나를 사용하면 localhost : 8080에서 서버를 설정할 수 있습니다.

# Python2の場合
$ python -m SimpleHTTPServer 8080

# Python3の場合
$ python3 -m http.server 8080

# Rubyの場合
$ ruby -run -e httpd . -p 8080

# node.jsの場合
$ npx http-server -p 8080

localhost:8080으로 가서 console을 확인하면 이런 것을 볼 수 있습니다.

화살표의 함수는 assembly/index.ts의 다음 함수입니다.

assembly/index.ts

export function add(a: i32, b: i32): i32 {
  return a + b;
}

콘솔에 다음 명령을 넣으면 확인할 수 있습니다.

loadWasm('build/optimized.wasm').then(wasm => {console.log(wasm.instance.exports.add(42, 24))})

가볍게 해설

fetch에서 build/optimized.wasm를 ArrayBuffer로로드하고 WebAssembly.instantiate()에서 실행 가능 상태로 인스턴스화합니다. Export된 함수는 WASM_OBJECT.instance.exports.FUNCTION_NAME 에서 액세스할 수 있습니다.WebAssembly.instantiateStreaming() 라는 메소드에 대한 소개는 흩어져 있지만 추천 할 수 없습니다. 왜냐하면 instantiateStreaming() 는 서버측이 application/wasm 라는 MIME type의 제공이 필요하고, 구현된 브라우저도 적습니다(적어도 2018년 12월 시점에서 iPhone의 Safari에서는 해당 메소드는 미실장).

Node.js에서 실행

npx asinit . 에서 자동 생성된 index.js 는 node.js 모듈로 WebAssembly 를 이동하는 방법을 보여주었습니다.

$ node
> const wasm = require('./index.js');
undefined
> wasm
{ memory: Memory {}, table: Table {}, add: [Function: 0] }
> wasm.add(42, 24)
66
>

매우 간단합니다.

추신 : 속편은 곧 공개 예정입니다