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

将 import source 声明转换为 WebAssembly.Module 对象，假设正在使用 import source 来导入 WebAssembly 模块的源代码。

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

这个插件应用的转换取决于你的顶层 targets，用来检测生成的代码是否应该兼容 Node.js、浏览器，或者两者。当目标是 Node.js 时，生成的代码还会根据你是否将模块编译为 CommonJS 而有所不同。

🌐 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

将模块编译为 AMD、SystemJS 或 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

Bun

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

用法

🌐 Usage

使用配置文件（推荐）

🌐 With a configuration file (Recommended)

babel.config.json

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

通过 CLI

🌐 Via CLI

Shell

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

通过 Node API

🌐 Via Node API

JavaScript

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

参考

🌐 References

• 提案：源阶段导入