@babel/plugin-proposal-import-wasm-source

Transforms import source declarations to WebAssembly.Module objects, assuming that import source is being used to import the source of a WebAssembly Module.

The transformation applied by this plugin depends on your top-level targets to detect whether the generated code should be compatible with Node.js, browsers, or both. When targeting Node.js, the generated code will also change depending on whether you are compiling modules to CommonJS or not.

caution

This plugin cannot be used when compiling modules to AMD, SystemJS, or UMD.

Example

input.js

import source libMod from "./lib.wasm";

will be transformed to

Browsers

output.js

const libMod = await WebAssembly.compileStreaming(fetch(import.meta.resolve("./lib.wasm")));

Node.js (ESM)

output.js

import { readFileSync as _readFileSync } from "fs";
const libMod = new WebAssembly.Module(_readFileSync(new URL(import.meta.resolve("./lib.wasm"))));

Node.js (CommonJS)

output.js

"use strict";

const libMod = new WebAssembly.Module(require("fs").readFileSync(require.resolve("./lib.wasm")));

Installation

npm

npm install --save-dev @babel/plugin-proposal-import-wasm-source

Yarn

yarn add --dev @babel/plugin-proposal-import-wasm-source

pnpm

pnpm add --save-dev @babel/plugin-proposal-import-wasm-source

Usage

With a configuration file (Recommended)

babel.config.json

{
  "plugins": [
    "@babel/plugin-proposal-import-wasm-source"
  ]
}

Via CLI

Shell

babel --plugins=@babel/plugin-proposal-import-wasm-source script.js

Via Node API

JavaScript

require("@babel/core").transformSync("code", {
  plugins: [
    "@babel/plugin-proposal-import-wasm-source"
  ],
});

References

• Proposal: Source Phase Imports