Import Wasm Assets#

Modern.js supports import WebAssembly assets in code.

Import#

You can import a WebAssembly module directly in a JavaScript file:

import { add } from './add.wasm';

console.log(add); // [native code]
console.log(add(1, 2)); // 3

WebAssembly modules can also be imported via dynamic import:

import('./add.wasm').then(({ add }) => {
  console.log('---- Async Wasm Module');
  console.log(add); // [native code]
  console.log(add(1, 2)); // 3
});

You can also get the path of a WebAssembly module using the new URL syntax:

const wasmURL = new URL('./add.wasm', import.meta.url);

console.log(wasmURL).pathname; // "/static/wasm/[hash].module.wasm"

Output Directory#

When a .wasm asset is imported, it will be output by Modern.js to the dist/static/wasm directory by default.

You can change the output directory of .wasm files via output.distPath config.

export default {
  output: {
    distPath: {
      wasm: 'resource/wasm',
    },
  },
};

Add Type Declaration#

When you import a Wasm file in TypeScript code, you usually need to add the corresponding type declaration.

For example, the add.wasm file exports an add() method, then you can create an add.wasm.d.ts file in the same directory and add the corresponding type declaration:

export const add = (num1: number, num2: number) => number;