Kun

Kun

IT学徒、技术民工、斜杠青年,机器人爱好者、摄影爱好 PS、PR、LR、达芬奇潜在学习者


共 243 篇文章


​ 基于react的拓展性的项目

wasm-react

在react项目中使用wasm

编写rust函数

#[wasm_bindgen]
pub fn generate_configuration(node_data: String, edge_data: String) -> String {
    let nodes: Vec<Node> = parse_nodes(&node_data);
    let edges: Vec<Edge> = parse_edges(&edge_data);
    let docker_compose_obj = generate_dockercompose_yml(nodes, edges);
    let output_string = serde_yaml::to_string(&docker_compose_obj).unwrap();
    return output_string;
}

添加编译wasm命令

"scripts": {
    ...    
    "build:wasm": "cd wasm-parser && ~/.cargo/bin/wasm-pack build --target web --out-dir ./wasm-build"
}

添加在js中调用wasm的包

"dependencies": {
    ...
    "wasm-parser": "file:./wasm-parser/wasm-build"
}

在react中调用wasm

// WASM modules
import init, { generate_configuration } from "wasm-parser";
// Calling the function 
init().then(() => {
    const rusty_str = generate_configuration(stringifiedNodes, stringifiedEdges);
});

https://betterprogramming.pub/deploying-a-wasm-powered-react-app-on-vercel-cf3cae2a75d6

resume

https://github.com/tbakerx/react-resume-template

如果你觉得我的文章对你有帮助的话,希望可以推荐和交流一下。欢迎關注和 Star 本博客或者关注我的 Github