如何构建支持多个捆绑机的WebAssembly软件包？

Question

我想使用JavaScript（Typescript） + WebAssembly（Rust）构建混合库（IE NPM软件包）。我想支持多个捆绑包，而不仅仅是webpack。这似乎很困难，因为每个Bundler都使用一种略有不同的方法来导入WASM：

// Webpack (experiments.asyncWebAssembly)
import { hello } from './my-lib.wasm'
hello()

// Rollup (using @rollup/plugin-wasm)
import init from './my-lib.wasm'
init().then(({ instance }) => { instance.exports.hello() })

// Parcel
import { hello } from './my-lib.wasm'
hello()
// ...or, if you want a promise
import('./my-lib.wasm').then(exports => { exports.hello() })

// Vite (note: this will be removed in v3.0,
// see https://github.com/vitejs/vite/discussions/7763)
import init from './my-lib.wasm'
init().then(exports => { exports.hello() })
// alternatively, use vite-plugin-wasm, which is the preferred approach for v3+
import { hello } from './my-lib.wasm'
hello()

我不能依靠Wasm-Bindgen生成的JS绑定，因为Afaik仅与WebPack兼容。

// JS bindings generated by wasm-bindgen
import * as wasm from './my-lib_bg.wasm'
export function hello() { wasm.hello() }

Web应用程序没有这个问题，因为他们可以选择自己的捆绑器 - 但我不知道Bundler会事先处理我的代码。

如何编写支持多个捆绑机的软件包？我可以以某种方式为每个捆绑器生成不同的入口点吗？

Answer 1

我认为bundler目标是未来的答案，即使用 wasm esm esm Integration 。它目前由WebPack和Vite（您提到的我提到的插件）支持。将来，浏览器和node.js中会有本机支持。但是目前可能需要创建插件来在其他捆绑机中支持它们。

目前的另一个选择是使用Web目标，该目标要求您的软件包的用户从Bundler获取WASM文件的URL并使用它初始化插件。