zoukankan      html  css  js  c++  java
  • [WASM Rust] Create and Publish a NPM Package Containing Rust Generated WebAssembly using wasm-pack

    wasm-pack is a tool that seeks to be a one-stop shop for building and working with Rust generated WebAssembly that you would like to interop with JavaScript. This includes ability to publish modules so that you can share your Rust generated WebAssembly code with others.

    In this lesson we create a npm package and export a Rust function that will log to the console in the browser. We publish the module to NPM and afterwards use a rust-webpack-template to install and use the newly published package.

    Create a new wasm lib:

    cargo new my-wasm-lib --lib

    Update Cargo.toml:

    [package]
    name = "my-wasm-lib"
    version = "0.1.0"
    authors = []
    edition = "2018"
    
    [lib]
    crate-type = ["cdylib"]
    
    [dependencies]
    wasm-bindgen = "0.2"

    lib.rs:

    extern crate wasm_bindgen;
    
    use wasm_bindgen::prelude:;*;
    
    #[wasm_bindgen]
    extern {
      #[wasm_bindgen(js_namespace = console)]
      fn log(msg: &str);
    }
    
    #[wasm_bindgen]
    pub fn greet(name: &str) {
      log(&format!("Hello {}!", name));
    }

    Run:

    wasm-pack build

    This creates a package directory. In previous lessons, I mentioned that it contains a WASM and a Javascript file. What I haven't mentioned yet is that it also creates a package.json based on our Cargo.toml.

    Publish:

    wasm-pack publish

    Then inside another wasm project:

    Install:

    npm install --save my-wasm-lib1215  # package name

    Open index.js:

    import("my-wasm-lib1215").then(module => {
      module.greet("World!@");
    })

    Run:

    npm start

    In the broswer console, you can see the msg:

    Hello World!@!

  • 相关阅读:
    Java 内部类种类及使用解析
    linux下的一些命令分析与shell的一些命令
    Centos7 安装gitlab
    centos7安装laravel
    laravel中对加载进行优化
    laravel如何利用数据库的形式发送通知
    laravel中的gate
    laravel中的scope作用域
    Laravel 使用firstOrCreate 报错MassAssignmentException
    laravel中关联模型并使用scout导入数据 +视图合成器
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9927040.html
Copyright © 2011-2022 走看看