是的,有一种方法可以在 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 放在同一文件夹中。
-
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));
- 添加构建命令
package.json
"esbuild":"node esbuild.js"
- 为要导出到 Rust 项目的函数创建 package.js。
import { format } from 'date-fns';
export function Dateformat(date, formatString) {
return format(date, formatString);
}
-
运行 esbuild 命令npm run esbuild
运行命令后,您将在 src 文件夹中看到 package.js。这是您可以在 Rust 项目中使用的 JavaScript 代码。
-
使用 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)
}
- 在您的 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>
}
}
- result Result https://i.stack.imgur.com/1xO18.png
我还做了一个概念验证,您可以使用 wasm-bindgen 在浏览器中直接下载 javascript。在下面的链接中。https://github.com/jinseok9338/WASM-POC https://github.com/jinseok9338/WASM-POC我需要更新自述文件。所以你可以更好地理解。它将在未来几周内完成。