如何构建一个支持多个捆绑器的WebAssembly包?

Question

我想用JavaScript (TypeScript) + WebAssembly (Rust)构建一个混合库(即NPM包)。我希望支持多个捆绑器，而不仅仅是Webpack。这似乎很困难，因为每个打包器使用略微不同的方法导入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绑定，因为它只与Webpack兼容。

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

Web应用没有这个问题，因为它们可以选择自己的打包器——但是我不知道哪个打包器会提前处理我的代码。

如何编写一个支持多个捆绑器的包?我能否以某种方式为每个捆绑器生成不同的入口点?

Answer 1

我认为bundler目标是未来的答案，即与WASM ESM集成。它目前由Webpack和Vite支持(你提到的我的插件)。在未来，浏览器和Node.js将提供本地支持。但目前可能需要创建插件才能在其他捆绑器中支持它们。

现在的另一个选择是使用web目标，它要求您的包的用户从捆绑器获得WASM文件的URL，并用它初始化您的插件。