docusaurus rust WebAssembly 开发配置流程

介绍

WebAssembly在前端应用的越来越光广泛,这里以docusaurus文档框架为例介绍一下docusaurus集成rust wasm的开发配置流程

准备

• rust开发环境
• docusaurus开发环境
• 安装wasm-pack

cargo install wasm-pack

Docusaurus config配置

Docusaurusl默认不支wasm模块的加载及导入需要自己创建插件开启wasm配置如下

• 在docusaurus.config.js中的config下plugs添加myPlugin函数配置如下, 相关文档见

 plugins: [
    [
        ...
    ],
    [
     ...
    ],
    [
      ...
    ],  
    
       function myPlugin() {
     
        return {
          name: 'custom-docusaurus-plugin',
          configureWebpack(config, isServer, utils) {
       
            return {
              // devServer: {
              //   headers: { 'application/wasm': 'wasm' },
              // },
              
              experiments: {  asyncWebAssembly: true,
                syncWebAssembly: true,},
              module: {
                rules: [
                  {
                    mimetype: 'application/wasm',
                    type: 'json',
                  },
                ],
              },
            };
          },
        };
      },
    
  ],

• asyncWebAssembly syncWebAssembly 开启允许加载wasm模块 mimetype是加载wasm时支持application/wasm请求头详见webpack5 Native配置 experiments说明 和 rulemimetype说明

创建rust wasm lib项目

• 在Docusaurus项目根目录执行 cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name wasm-lib创建wasm-lib模块,然后置配Cargo.toml和lib.rs如下

lib.rs中导出函数为greet 即alert弹出框功能

#[wasm_bindgen]
pub fn greet() {
    alert("Hello, wasm-lib!");
}

添加package编译配置

• 在Docusaurus项目package.json 添加wasm编译置配置

"build:wasm": "cd wasm-lib && wasm-pack build --target web --out-dir pkg",
"install:wasm": "yarn add file:./wasm-lib/pkg" 

如果使用npm

"build:wasm": "cd wasm-lib && wasm-pack build --target web --out-dir pkg",
"install:wasm": "npm install ./wasm-lib/pkg" 

执行yarn build:wasm运行编译wasm-lib模块然后在wasm-lib目录下生成pkg`目录

然后执行yarn install:wam 添加wasm-lib依赖到package.json中的dependencies

在package.json中会新增一个wasm-lib依赖

 "wasm-lib": "file:wasm-lib/pkg", 

** 注window用户需要在支持cd命令的shell中运行build:wasm ,没有的可在vscode安装nushell**

测试代码

引入wasm-lib模块

import init, { greet } from "wasm-lib";

调用greet函数

import init, { add } from "wasm-lib"
     init().then(() => {
             greet()
           })

修改wasm-lib时需要重新移除wasm-lib重新安装并注意使用docusaurus clear清理缓存 更新wasm-lib步骤如下

yarn remove wasm-lib  
yarn install:wasm
docusaurus clear
yarn start