create-react-app脚手架使用rust wasm

开发环境

安装 rust wasm相关工具包

1. 安装 cargo install cargo-generate
2. 安装 cargo install wasm-pack
3. 安装 cargo install wasm-bindgen-cli

创建项目

• 先创建一个名为react-wasm-pro 的文件夹（即项目工程）
• 在react-wasm-pro根目录创建react 项目npx create-react-app react-client
• 在在react-wasm-pro根目录创建一个wasm 模板项目如下

cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name wasm

项目目录如下图
其中wasm/src/lib模板内容如下

mod utils;

use wasm_bindgen::prelude::*;

// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
// allocator.
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

#[wasm_bindgen]
extern {
    fn alert(s: &str);
}

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

构建编译

在wasm目录下运行wasm-pack build构建生成WebAssembly npm 包 ，编译完成后会在wasm目录下生成一个pkg文件夹，pkg生成的内容如下图

如果 npm registry 账号在pkg目录下运行npm publish --access=public然后使用即可，这里我没有npm账号就直接构建本地npm包

npm本地安装包构建

在pkg目录下使用npm link
注：解除使用npm unlike
具体使用可参照https://www.cnblogs.com/mengff/p/11743145.html

配置react项目

• 安装react 扩展配置

npm install react-app-rewired wasm-loader -D

注：安装react-app-rewired取代react-scripts，可以扩展webpack的配置，类似vue.config.js

• 修改package.json中的react-scripts为react-app-rewired
  修改前：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

修改后

 "scripts": {
   "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

在项目根目录添加文件config-overrides.js, 这是nodejs，所以用node的写法

config-overrides.js内容

const path = require('path');

module.exports = function override(config, env) {
  const wasmExtensionRegExp = /\.wasm$/;

  config.resolve.extensions.push('.wasm');

  config.module.rules.forEach(rule => {
    (rule.oneOf || []).forEach(oneOf => {
      if (oneOf.loader && oneOf.loader.indexOf('file-loader') >= 0) {
        // Make file-loader ignore WASM files
        oneOf.exclude.push(wasmExtensionRegExp);
      }
    });
  });

  // Add a dedicated loader for WASM
  config.module.rules.push({
    test: wasmExtensionRegExp,
    include: path.resolve(__dirname, 'node_moduls'),//注意引用路径为node_moduls
    use: [{ loader: require.resolve('wasm-loader'), options: {} }]
  });

  return config;
};

在react-client 运行npm link wasm 链接到上面安装本地的wasm npm 包
注： 模块名与wasm toml中保持一至

D:\myvueWork\reactpro\react-wasm-pro\react-client>npm link wasm
D:\myvueWork\reactpro\react-wasm-pro\react-client\node_modules\wasm -> D:\soft\nodejs\node_global\node_modules\wasm -> D:\myvueWork\reactpro\react-wasm-pro\wasm\pkg

测试

在App.js中app组件中加入修改代码如下

import logo from './logo.svg';
import './App.css';

function App() {
  import('react-wasm').then(({greet}) => {
    greet();
  })

  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

运行yarn start 如图

https://prestonrichey.com/blog/react-rust-wasm/

https://stackoverflow.com/questions/59319775/how-to-use-webassembly-wasm-with-create-react-app/66911353#66911353