简介
rollup-plugin-wasm-module 是一个可以在 Rollup 构建过程中处理 WebAssembly 模块的插件。它可以将 WebAssembly 模块编译成 JavaScript 模块，从而使得我们可以在浏览器环境下使用 WebAssembly。
安装
使用 npm 命令进行安装：
npm install rollup-plugin-wasm-module --save-dev
配置
在 Rollup 的配置文件中，需要引入该插件并进行相应的配置。以下是一个基本的配置示例：
-- -------------------- ---- -------
-- ----------------
------ ---- ---- ----------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
------
-- ---
---
--
--配置项
types
- 类型：
Array或者String - 默认值：
["wasm"]
指定需要处理的模块类型，支持字符串和数组两种形式。例如：
wasm({
types: ["wasm", "wat"],
});include
- 类型：
String、Array或者RegExp - 默认值：
.（即所有文件）
指定需要处理的文件路径，可以是字符串、数组或正则表达式。例如：
wasm({
include: "./src/**/*.wasm",
});exclude
- 类型：
String、Array或者RegExp - 默认值：
undefined
指定需要排除的文件路径，可以是字符串、数组或正则表达式。例如：
wasm({
exclude: ["./src/vendor/**/*.wasm"],
});bytesLimit
- 类型：
Number - 默认值：
30000
指定编译后的 JavaScript 模块的最大大小（以字节为单位）。如果超过了这个大小限制，则会生成一个错误。例如：
wasm({
bytesLimit: 50000,
});示例
假设我们有一个 WebAssembly 模块 add.wasm，它实现了两个数相加的功能：
(module
(func $add (param $x i32) (param $y i32) (result i32)
get_local $x
get_local $y
i32.add)
(export "add" (func $add)))接下来，我们使用 rollup-plugin-wasm-module 将该模块编译成 JavaScript 模块，并导出 add 函数。
// index.js import add from "./add.wasm"; console.log(add(2, 3)); // 5
现在运行 Rollup，即可得到一个包含编译后的 JavaScript 模块的文件：
rollup -c
总结
通过 rollup-plugin-wasm-module 插件，我们可以方便地将 WebAssembly 模块转换为 JavaScript 模块，从而实现在浏览器环境下使用 WebAssembly 的目的。希望这篇教程能够帮助你学习和了解这个插件的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47746