This plugin allows you to use WebAssembly built with wasm-pack in rollup. (+ This also works with (service)workers)
- A npm module (or external) built with wasm-pack. (it has to be built with target
web
) - Rollup + config
npm install --save-dev rollup-wasm-pack-import
rollup.config.js
import wasmImport from 'rollup-wasm-pack-import';
{
plugins: [
wasmImport({
copy: true,
serverPath: '/',
mapping: {
'my-wasm-module': 'my-wasm.wasm'
}
})
...
]
}
Options object to configure wasm-pack-import.
Property | Type | Description |
---|---|---|
copy | boolean | if true , the wasm will be copied in your output directory |
mapping | object | key: module name of your wasm-pack npm modulevalue: the web assembly file name |
outputDir | string | if copy is set to true, the wasm files will be copied in this directory |
serverPath | string | path from the serve url where the wasm file is located. The path should always must always end with '/' |
Based on the current state of WebAssembly they need to be loaded async.
// if its installed via npm
// if you are using a local directory built with wasm-pack, you can reference to '<relative-path>/pkg' (keep in mind to use the module name for options.mapping)
import * as wasm from 'my-wasm-module';
async function load() {
// initialize the web assembly
await wasm.default();
console.log(wasm);
// <your wasm code>
};
load();
Version 2.0.0:
- changed: The plugin is taking the
name
from the "wasm-pack" built module (package.json) and the name of thewasm
file aswell to check against themapping key
. - added: added a new option
serverPath
I wrote this plugin for my personal specific prototypíng use case. This means if you have slightly differnt requirements this plugin should be more like an inspiration which you can use and adapt. (currently there are no error check / tests its more like a poc). I am looking forward for a pull request with a cleaned version. :)