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

import source 宣言を WebAssembly.Module オブジェクトに変換します。import source が WebAssembly モジュールのソースをインポートするために使用されていると仮定します。

このプラグインによって適用される変換は、生成されたコードが Node.js、ブラウザ、またはその両方と互換性があるかどうかを検出するために、トップレベルの targets によって異なります。Node.js をターゲットにする場合、生成されたコードは、モジュールを CommonJS にコンパイルするかどうかによっても変化します。

注意

モジュールを AMD、SystemJS、または UMD にコンパイルする場合、このプラグインは使用できません。

例

input.js

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

次のように変換されます

ブラウザ

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")));

インストール

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

使い方

構成ファイルを使用する（推奨）

babel.config.json

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

CLI経由

シェル

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

Node API経由

JavaScript

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

参考文献

• 提案: Source Phase Imports