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

【问题标题】：Trying to understand how to import web-assembly package via webpack试图了解如何通过 webpack 导入 web-assembly 包
【发布时间】：2020-10-30 04:05:46
【问题描述】：

我在 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 构建它时（不使用任何加载器，并且我的 resolve.extensions webpack 配置中有 .wasm）我收到以下错误

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

据我了解，我需要为此模块使用import()，但是如何使这些导入对我的班级可用？应用程序将失败，因为我们需要等待该导入？如果我这样做，我会收到一条错误消息，指出 Allocator 和 Node 不是构造函数。

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

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

【问题讨论】：

此链接末尾附近与让功能性“.wasm”加载器在包含 empscriptem 类型组件的库的构建上下文中工作有关。 gist.github.com/surma/b2705b6cca29357ebea1c9e6e15684cc
@RobertRowntree 我浏览了所有的 cmets，仍然不确定您的建议是什么

标签： javascript webpack webassembly

【解决方案1】：

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

  experiments: {
    asyncWebAssembly: true,
    importAsync: true
  }

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

【讨论】：

importAsync was removed 最近来自 webpack，但 asyncWebAssembly 似乎就足够了。
哦，实际上，它只是将 webpack 从 v4.4.1 更新到 v5.1.3 解决了我的问题 - 根本不需要在配置中指定 experiments。