试图了解如何通过 webpack 导入 web-assembly 包

Question

我正在webpack@4.43.0尝试使用这个 Web 程序集库https://github.com/vislyhq/stretch根据文档，我正在从中导入一些类，即

import { Allocator, Node } from 'stretch-layout';

class Base {
  public layoutNode;

  public constructor() {
    this.layoutNode = new Node(allocator, {});
  }
}

但是，当我尝试使用 webpack 构建它时（不使用任何加载器，并且.wasm我的resolve.extensionswebpack 配置中有）我收到以下错误

WebAssembly 模块包含在初始块中。这是不允许的，因为 WebAssembly 下载和编译必须异步进行。在入口点和 WebAssembly 模块之间的某处添加一个异步拆分点（即 import()）：

据我了解，我需要import()用于此模块，但是如何使这些导入可用于我的班级？应用程序会失败，因为我们需要等待导入？如果我这样做，我得到一个错误，指出Allocator并Node没有构造函数。

let Allocator: any = null;
let Node: any = null;

import('stretch-layout').then(module => {
  Allocator = module.Allocator;
  Node = module.Node;
});

Answer 1

通过在配置中添加以下实验标志，我能够使用 webpack 5 的最新测试版解决这个问题

  experiments: {
    asyncWebAssembly: true,
    importAsync: true
  }

这样你就不必担心任何异步import()语句