首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

Webpack 5 支持访问 Rust WebAssembly 线性内存

编程知识
2024年08月26日 20:03

前面在《解决 Rust WebAssembly 启动 Web 程序报错》 一文中讲到,将 Webpack 升级到 5.54.0+。其实问题并未彻底解决,还潜藏另一个问题。当我们像原先那样,通过导出 memory 来访问 WebAssembly 线性内存:

import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";

npm run start 时会报警,结果是程序无法正常运行:

export 'memory' (imported as 'memory') was not found in 'wasm-game-of-life/wasm_game_of_life_bg'
 (possible exports: Universe, __wbg_error_f851667af71bcfc6, 
__wbg_new_abda76e883ba8a5f, __wbg_set_wasm, __wbg_stack_658279fe44541cf6, 
__wbindgen_object_drop_ref, __wbindgen_throw)

在 github 上 wasm-bindgenwasm-packwebpack 的 Issues 中搜了一通。发现都有报告类似问题,不知为何过了两三年仍处于 Open 状态。不过评论中也有提出可供参考的解决办法。

总结了评论中的方法,我自己做了这样的修改:

首先,在 www 目录中创建一个源文件 memory.js,用以从 wasm 文件中导出 memory,内容如下:

// 从 `wasm`  文件中导出 `memory`
export { memory } from "wasm-game-of-life/wasm_game_of_life_bg.wasm";

然后,在我们需要访问 memory 的源文件中导入:

// 导入 `memory`
import { memory } from './memory';

...

// 访问线性内存中的宇宙细胞数据
const cellsPtr = universe.cells();
const size = Math.ceil((width * height) / 8);
const cells = new Uint8Array(memory.buffer, cellsPtr, size);

再次 npm run start,正常运行!

image

对了,别忘记我们之前升级 Webpack 5 时,修改了 webpack.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');

module.exports = {
  entry: "./bootstrap.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bootstrap.js",
  },
  mode: "development",
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: "index.html" },
      ]
    })
  ],
  // 支持 WebAssembly 打包
  experiments: {
    asyncWebAssembly: true,
    syncWebAssembly: true
  },
};
From:https://www.cnblogs.com/wxxweb/p/18381580
本文地址: http://www.shuzixingkong.net/article/1461
0评论
提交 加载更多评论
其他文章 Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手
Vue3.5新增了一个baseWatch,让watch函数和Vue组件彻底分手,他的实现和Vue组件以及生命周期没有一毛钱关系。
Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手 Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手 Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手
JS脚本批量处理TS数据类型
在TS开发中,经常会遇到后台数据字段比较多的情况,这时候需要一个个复制字段然后给他手动配置数据类型来完成我们的TS类型定义,相当麻烦。有什么快速的方法呢,我就目前遇到的两种情况分别写了JS脚本来处理后台数据,直接生成我们需要的数据格式。 脚本编写 1. 处理数据字典中的数据 一般数据字典表里的数据可
JS脚本批量处理TS数据类型 JS脚本批量处理TS数据类型 JS脚本批量处理TS数据类型
SpringBoot多环境日志配置
SpringBoot多环境日志配置 SpringBoot 默认使用 LogBack 日志系统 默认情况下,SpringBoot项目的日志只会在控制台输入。 如果想查询历史日志则无法找到,我们需要一个日志系统来统一管理日志。 一般正式项目会有单独日志系统,将日志操作存入数据库。 第一种方式是 在 ap
SpringBoot多环境日志配置 SpringBoot多环境日志配置
TwinCAT3 - 实现CiA402
目录1,起缘2,想办法3,开搞3.1,CANOpen通信3.1.1 对象字典3.1.2 通信建立3.2,CiA402伺服状态机3.3,伺服运行3.3.1 操作模式3.3.2 轮廓位置模式3.3.3 轮廓速度模式3.3.4 其他4,用起来 1,起缘 在TwinCAT3项目中涉及到轴运动时,通常做法都是
TwinCAT3 - 实现CiA402 TwinCAT3 - 实现CiA402 TwinCAT3 - 实现CiA402
数据库服务器运维最佳实践
本文简要介绍了数据库服务器运维的最佳实践涵盖了多个方面,包括硬件选择、系统配置、性能优化、安全管理、数据备份与恢复、高可用性和灾难恢复等。
学习真DDD的最佳路径
本文书接上回《DDD是软件工程的第一性原理?》,关注公众号(老肖想当外语大佬)获取信息: 最新文章更新; DDD框架源码(.NET、Java双平台); 加群畅聊,建模分析、技术实现交流; 视频和直播在B站。 假DDD的特征 在开始之前,考虑到目前关于DDD的资料非常多且杂,我们需要具备分辨的能力,确
学习真DDD的最佳路径 学习真DDD的最佳路径 学习真DDD的最佳路径
知道泛型擦除会造成多态的冲突吗?
类型擦除会造成多态的冲突,而JVM的解决方法就是泛型的桥接方法。 举例 现在有这样一个泛型类: class Pair<T> { private T value; public T getValue() { return value; } public void setValue(T va
ArcGIS创建渔网工具的使用方法
本文介绍在ArcMap软件中,通过“Create Fishnet”工具创建渔网,从而获得指定大小的矢量格网数据的方法~
ArcGIS创建渔网工具的使用方法 ArcGIS创建渔网工具的使用方法 ArcGIS创建渔网工具的使用方法