如何在 Flutter Web 应用程序中包含 WebAssembly 模块？答案

【问题标题】：How to include a WebAssembly module in a Flutter Web application?如何在 Flutter Web 应用程序中包含 WebAssembly 模块？
【发布时间】：2020-04-21 10:12:21
【问题描述】：

我正在尝试通过 WebAssembly 使用一些 Rust 代码来扩展我的 Flutter Web 应用程序。我的项目结构如下：

lib/
- main.dart
web/
  - wasm_demo/
     - src/
       - lib.rs
     - pkg/
       - wasm_demo.js
       - wasm_demo_bg.wasm
     - bootstrap.js
     - Cargo.toml
  - index.html

Rust 代码只是创建一个 String 并返回它：

// web/wasm_demo/src/lib.rs

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn get_string() -> String {
    String::from("This is a Rust String!")
}

当使用wasm-pack build 编译时，字节码以web/wasm_demo/pkg/wasm_demo_bg.wasm 结束。 wasm_demo.js 只是一个 JavaScript 模块，从 wasm_demo_bg.wasm 导出 get_string 函数：

import * as wasm from './wasm_demo_bg.wasm';

...

/**
* @returns {string}
*/
export function get_string() {
    ...
}

bootstrap.js 导入该模块并将其放入 window 对象中：

// bootstrap.js

import * as wasm_demo from "./pkg/wasm_demo";

window.wasm_demo = wasm_demo;

index.html 在启动实际应用程序之前加载该引导程序：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Rust/WASM/Flutter interop demo</title>
</head>

<body>
  <script src="wasm_demo/bootstrap.js" type="module"></script>

  <script src="main.dart.js" type="application/javascript"></script>
</body>

</html>

最后，Flutter 显示 Rust String：

import 'dart:js';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rust/WASM/Flutter interop demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext buildContext) {
    var rustString = context["wasm_demo"].callMethod('get_string').toString();

    return Scaffold(
      appBar: AppBar(
        title: Text("Rust/WASM/Flutter interop demo"),
      ),
      body: Center(
        child: Text(rustString),
      ),
    );
  }
}

我遇到的问题是 wasm_demo_bg.wasm 显然不包含在捆绑包中：

:44809/wasm_demo/pkg/wasm_demo:1 Failed to load resource: the server responded with a status of 404 (Not Found)

有什么方法可以告诉 Flutter 在 bundle 中需要 WebAssembly 模块吗？谢谢！

【问题讨论】：

标签： flutter rust webassembly flutter-web

【解决方案1】：

假设您使用的是 Emscripten，您可以生成两个文件，一个 .js 和一个 .wasm via

emcc -o build/wasm_demo.js web/wasm_demo/src/lib.rs

调用时，指定您刚刚构建的.js 文件，它应该会自动获取其补充的.wasm 文件：

import wasmDemo from './build/wasm_demo.js'
new wasmDemo({
  onRuntimeInitialized() {
    console.log('wasm ready', this._get_string());
  }
});

【讨论】：