angular - 在我的 angular 项目中实现 webassembly

Question

关闭。这个问题需要更多focused .它目前不接受答案。












想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post .

2年前关闭。




Improve this question




我已经在 Angular7 上开发了我的项目，现在我想探索 webAssembly。那么如何将我最近的 Web 应用程序转换为 WebAssembly？

Answer 1

您可以通过以下步骤使用 webassembly 实现 angular 项目

你必须在你的 angular 项目中安装 Web Assembly JavaScript API
npm install @types/webassembly-js-api --dev --save

现在用 C 创建你的服务
#include <emscripten.h>
int EMSCRIPTEN_KEEPALIVE fibonacci(int n)
{
if (n == 0 || n == 1)
return n;
else
return (fibonacci(n - 1) + fibonacci(n - 2));
}

将 C 编译为 Web 程序集 (WASM)
emcc wasm/fibonacci.c -Os -s WASM=1 -s MODULARIZE=1 -o wasm/fibonacci.js

现在在 Angular 中创建服务

import { Injectable } from '@angular/core'
import { Observable, BehaviorSubject } from 'rxjs'
import { filter, map } from 'rxjs/operators'

import * as Module from './../../wasm/fibonacci.js'
import '!!file-loader?name=wasm/fibonacci.wasm!../../wasm/fibonacci.wasm'

@Injectable()
class WasmService {
  module: any

  wasmReady = new BehaviorSubject<boolean>(false)

  constructor() {
    this.instantiateWasm('wasm/fibonacci.wasm')
  }

  private async instantiateWasm(url: string) {
    // fetch the wasm file
    const wasmFile = await fetch(url)

    // convert it into a binary array
    const buffer = await wasmFile.arrayBuffer()
    const binary = new Uint8Array(buffer)

    // create module arguments
    // including the wasm-file
    const moduleArgs = {
      wasmBinary: binary,
      onRuntimeInitialized: () => {
        this.wasmReady.next(true)
      },
    }

    // instantiate the module
    this.module = Module(moduleArgs)
  }

  public fibonacci(input: number): Observable<number> {
    return this.wasmReady.pipe(filter(value => value === true)).pipe(
      map(() => {
        return this.module._fibonacci(input)
      })
    )
  }
}

如需更多引用，您可以关注此博客 https://malcoded.com/posts/web-assembly-angular/