将 NPM 包与 Rust 和 Webassemble 结合使用

2024-04-03

有没有办法在 Rust 代码中使用 npm 包和 webassemble?现在使用此模板中已存在的 webpack、@wasm-tool/wasm-pack-plugin 和 wasm_bindgen 箱:https://github.com/rustwasm/rust-webpack-template/tree/master/template https://github.com/rustwasm/rust-webpack-template/tree/master/template

TIA.


是的,有一种方法可以在 rust/wasm 代码中使用 npm pakage。 假设您想使用安装的 date-fns 软件包npm i date-fns并且您想在 Rust 项目中使用它。

这就是我所做的。 - 捆绑您的 javascript 并将其与 wasm-bindgen 一起使用文件夹结构 https://i.stack.imgur.com/BjP4w.png

如图所示,为了方便起见,我将 node_modules/package.json、cargo.toml 放在同一文件夹中。

  1. npm i esbuild对于 esbuild.这是为了捆绑你的 javascript。 这是我的esbuild.js

esbuild.build({
  entryPoints: ['package.js'],
  bundle: true,
  outfile: 'src/package.js',
  format: 'esm',
  minify: true,
}).catch(() => process.exit(1));
  1. 添加构建命令package.json "esbuild":"node esbuild.js"
  2. 为要导出到 Rust 项目的函数创建 package.js。
import { format } from 'date-fns';

export function Dateformat(date, formatString) {
    return format(date, formatString);
}
  1. 运行 esbuild 命令npm run esbuild运行命令后,您将在 src 文件夹中看到 package.js。这是您可以在 Rust 项目中使用的 JavaScript 代码。

  2. 使用 wasm-bindgen 导入 javascript

use js_sys::Date;
use wasm_bindgen::prelude::*;

#[wasm_bindgen(module = "/src/package.js")]
extern "C" {
    fn Dateformat(date: &Date, formatString: &str) -> String;
}

#[wasm_bindgen]
pub fn my_format(date: &Date, format_string: &str) -> String {
    Dateformat(date, format_string)
}
  1. 在您的 rust/wasm 项目中使用导入的函数。
// this is the project set up with yew.
use js_sys::Date;
use yew::prelude::*;

use crate::pages::date_fns::my_format;

#[function_component(NpmCode)]
pub fn npm_code() -> Html {
    let date = use_state(|| Option::<String>::None);
    
    let onclick = {
        let date = date.clone();
        Callback::from(move |_| {
            let now = Date::new_0();
            let formatted_date = my_format(&now, "'Today is a' eeee");
            date.set(Some(formatted_date));
        })
    };

    html! {
        <div class="flex flex-col items-center">
            <p class="text-lg font-bold mb-2">{"This time is generated with date-fns npm package"}</p>
            <p class="text-gray-500 mb-4">{date.clone().as_ref().map(|d| d.as_str()).unwrap_or("null")}</p>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" {onclick}>
                {"Generate Date"}
            </button>
        </div>
    }
}
  1. result Result https://i.stack.imgur.com/1xO18.png

我还做了一个概念验证,您可以使用 wasm-bindgen 在浏览器中直接下载 javascript。在下面的链接中。https://github.com/jinseok9338/WASM-POC https://github.com/jinseok9338/WASM-POC我需要更新自述文件。所以你可以更好地理解。它将在未来几周内完成。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 NPM 包与 Rust 和 Webassemble 结合使用 的相关文章

随机推荐

  • 运行 Google Web 应用程序脚本后出现空白屏幕

    我正在通过 Google Sheets 开发一个签到应用程序 并希望创建一个搜索功能 该功能将运动名称作为 HTML 表单中的输入 然后从 HTML 表格中的工作表返回有关运动的信息 但是 当我尝试测试网络应用程序时 没有任何反应 我怎样才
  • 从 Android 应用程序堆栈中手动删除活动

    我一直在开发 Android Native App 我想做的是 Activities A gt B gt C Then A gt B gt C gt C 从 C Activity 中 如果它再次指向 C 那么我想手动从堆栈中删除 C B 在
  • 在 O(1) 空间中从流中选择随机项

    使用恒定空间以均匀概率从流中随机选择一个项目 该流提供以下操作 class Stream def init self data self data list data def read self if not self data retur
  • 如何在 opencv 版本 4.4.0 上正确使用 cv2.findContours()?

    我正在尝试在 opencv 版本 4 4 0 中使用 cv2 findContours 我使用Python版本3 8 5 但它抛出一个错误 我无法弄清楚 我不确定代码有什么问题 这是一些背景 根据 OpenCV 的语法cv2 findCon
  • 查找 iPhone 中两个日期之间的总天数

    我想查找两个日期之间的总天数 例如今天是 01 01 2011 DD MM YYYY 第二个日期是 25 03 2011 我如何找到总天数 NSDate currentdate NSDate date NSLog curretdate is
  • 基于向量键合并数据框

    我是一个绝对的初学者 希望有人能够帮助我解决合并问题 我今晚大部分时间都在解决这个问题 并且迄今为止无法成功地将解决方案应用于此特定示例的类似问题 我制作了一个虚拟数据框和向量来帮助说明我的问题 dumdata lt data frame
  • 如何将日期范围格式化为“MMM,d”?

    我正在尝试显示当前日期的周数以及周数的日期范围 现在日期范围格式是 DateTime 我想将其更改为 Jan 13 关于如何解决这个问题有什么建议吗 override func viewDidLoad super viewDidLoad l
  • Excel:从日期字符串中提取数字

    我有几个格式错误的日期列 我正在尝试将这些列转换为 月 年 和 start day 列 这是一个示例 January 13th 2018 January 13th 14th 2018 January 5th 7th 2018 January
  • 如何实现 Angular 的“盒子里的香蕉”与自定义元素的双向绑定?

    我正在尝试构建一个将由 Angular 应用程序使用的自定义元素 自定义元素将采用一个 prop 并可能对其进行操作 我的理解是我可以使用 盒子里的香蕉 来处理这个绑定 又名
  • 仅当变量为空时才分配变量

    在 Ruby 上有这样的东西 var value 基本上 这意味着 var将被分配 value 除非 var尚未分配 例如 如果 var is nil 我正在 Kotlin 上寻找相同的东西 但到目前为止 最接近的是 elvis 运算符 有
  • 为什么 Jekyll Remote_theme 的 `_config` 文件中的站点变量不可访问?

    According to this https jekyllrb com docs themes pre configuring theme gems40 Jekyll will read in a config yml at the ro
  • python -m:查找模块规范时出错

    根据 python 文档 m标志应该执行以下操作 在 sys path 中搜索指定模块并执行其内容 main module 当我简单地运行我的脚本时python命令 一切正常 由于我现在想从更高级别导入某些内容 因此我必须使用以下命令运行脚
  • Elasticsearch:在关闭数据节点之前撤出所有数据?

    有没有办法告诉节点删除其所有数据 将其分散回其他节点 以便我可以将其关闭 并且在其关闭后不处理重新平衡 重新复制 如果每个分片有 2 个副本 并且删除了一个节点 则某些分片现在只有 1 个实时副本 必须重新复制 如果可以的话 我宁愿在任何一
  • C# 文件创建 - 如何授予 IUSR DELETE?

    我有一个用 C 编写的控制台程序 它在用户 foo 下运行 该程序创建一个文件 在某些情况下 在 IUSR 下运行的 Web 应用程序需要能够删除控制台应用程序创建的文件 我想在创建文件时向 IUSR 授予 DELETE 或任何等效的操作
  • 在 Unity 2D 中拖动对象

    我正在寻找 Unity 2D 的对象拖动脚本 我在网上找到了一个很好的方法 但它似乎只能在Unity 3D中工作 这对我来说不好 因为我正在制作 2D 游戏 而且它不会以这种方式与 墙 发生碰撞 我尝试将其重写为 2D 但使用向量时遇到了错
  • -1.#IND000 在 Visual Studio 调试窗口中意味着什么?

    在Visual Studio 2010监视窗口中 我发现变量的值变成了 1 IND000 这是什么意思 IND 是 Windows 系统中 NaN Not a Number 的表示 IND 不确定形式 主要是非法运算的结果 例如除以零或无穷
  • 在 drupal 中为自定义块创建自定义模板文件

    创建自定义 tpl 文件来为自定义块设置主题的 drupal 方法是什么 具体来说 我尝试以编程方式创建一个块 然后找到一种方法将视图代码与模块 php 代码分开 如果它是一个页面 Drupal theme 将是实现这一目标的非常有效的方法
  • HRegionServer 显示“错误告诉主机我们已经启动”。显示套接字异常:参数无效

    我正在尝试在 3 台 centos 机器上创建一个 hbase 集群 Hadoop v 2 8 0 已启动并在我配置的 HBase v 1 2 5 上运行 Hbase 启动正常 它启动了 HMaster 和区域服务器 但仍然在区域服务器和
  • 各个队列是否可以有死信队列

    目前 我的 ActiveMQ 服务器中有一个名为hello world 每当消息处理失败时 ActiveMQ 都会创建一个名为的默认目录ActiveMQ DLQ 是否可以将该名称更改为类似的名称hello world DLQ 原因是我将来可
  • 将 NPM 包与 Rust 和 Webassemble 结合使用

    有没有办法在 Rust 代码中使用 npm 包和 webassemble 现在使用此模板中已存在的 webpack wasm tool wasm pack plugin 和 wasm bindgen 箱 https github com r