ES6 module support

The WasmEdge QuickJS runtime supports ES6 modules. In fact, the rollup commands we used in the React SSR examples convert and bundle CommonJS and NPM modules into ES6 modules so that they can be executed in WasmEdge QuickJS. This article will show you how to use ES6 module in WasmEdge.

We will take the example in example_js/es6_module_demo folder as an example. The module_def.js file defines and exports a simple JS function.

  1. function hello(){
  2. console.log('hello from module_def.js');
  3. }
  4. export {hello};

The module_def_async.js file defines and exports an aysnc function and a variable.

  1. export async function hello() {
  2. console.log('hello from module_def_async.js');
  3. return 'module_def_async.js : return value';
  4. }
  5. export var something = 'async thing';

The demo.js file imports functions and variables from those modules and executes them.

  1. import {hello as module_def_hello} from './module_def.js';
  2. module_def_hello();
  3. var f = async () => {
  4. let {hello, something} = await import('./module_def_async.js');
  5. await hello();
  6. console.log('./module_def_async.js `something` is ', something);
  7. };
  8. f();

To run the example, you can do the following on the CLI.

  1. $ cd example_js/es6_module_demo
  2. $ wasmedge --dir .:. ../../target/wasm32-wasi/release/wasmedge_quickjs.wasm demo.js
  3. hello from module_def.js
  4. hello from module_def_async.js
  5. ./module_def_async.js `something` is async thing

Note: the --dir .:. on the command line is to give wasmedge permission to read the local directory in the file system for the demo.js file.