Rust Webassembly + webpack React 環境を作成 #Rust #Webassembly #javascript #React #node

knaka Tech-Blog

2020年9月6日 18:09

■ 概要:

前の Rust Webassembly (下記 wasm) 関係になり
React(create-react-app) で、wasmが読込エラーの関係で
webpackに、React を追加して。wasm 動作させるメモです

■ 環境

Rust
rustc 1.46.0
cargo 1.46.0
wasm-pack
node 12.18.3
webpack

■ 参考の設定

■　プロジェクト作成、ビルド

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

wasm-pack build

・webpack 追加

npm init wasm-app www

■ wasmの参照設定

cd pkg/
npm link

cd wwww/
npm link wasm-crud-1

■ npm 追加

・webpack以外を、追加

npm install --save react react-dom

npm install react-router-dom --save

npm install --save-dev html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf

■ 設定など、react-router使う例です
(例：　プロジェクト名= wasm-crud-1 )

・package.json

{
 "name": "create-wasm-app",
 "version": "0.1.0",
 "description": "create an app to consume rust-generated wasm packages",
 "main": "index.js",
 "bin": {
   "create-wasm-app": ".bin/create-wasm-app.js"
 },
 "scripts": {
   "build": "webpack --config webpack.config.js",
   "start": "webpack-dev-server"
 },
 "repository": {
   "type": "git",
   "url": "git+https://github.com/rustwasm/create-wasm-app.git"
 },
 "keywords": [
   "webassembly",
   "wasm",
   "rust",
   "webpack"
 ],
 "author": "Ashley Williams <ashley666ashley@gmail.com>",
 "license": "(MIT OR Apache-2.0)",
 "bugs": {
   "url": "https://github.com/rustwasm/create-wasm-app/issues"
 },
 "homepage": "https://github.com/rustwasm/create-wasm-app#readme",
 "devDependencies": {
   "@babel/core": "^7.11.6",
   "@babel/preset-env": "^7.11.5",
   "@babel/preset-react": "^7.10.4",
   "babel-loader": "^8.1.0",
   "copy-webpack-plugin": "^5.0.0",
   "hello-wasm-pack": "^0.1.0",
   "html-webpack-plugin": "^4.4.1",
   "rimraf": "^3.0.2",
   "webpack": "^4.29.3",
   "webpack-cli": "^3.1.0",
   "webpack-dev-server": "^3.1.5"
 },
 "dependencies": {
   "react": "^16.13.1",
   "react-dom": "^16.13.1",
   "react-router-dom": "^5.2.0"
 }
}

・.babelrc

{
   "presets": [
       [
       "@babel/preset-env",
       { "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
       ],
       "@babel/react"
   ]
}

・webpack.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');

module.exports = {
 entry: "./bootstrap.js",
 output: {
   path: path.resolve(__dirname, "dist"),
   filename: "bootstrap.js",
 },
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       use: ['babel-loader'],
       exclude: /node_modules/,
     },
   ],
 },  
 mode: "development",
 devServer: {
   contentBase: path.resolve(__dirname, "public")
 },  
 plugins: [
   new CopyWebpackPlugin(['index.html'])
 ],
};

・index.html

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <link rel="icon" href="/favicon.ico" />
   <title>Hello wasm-pack!</title>
 </head>
 <body>
   <div id="root"></div>
   <script src="./bootstrap.js"></script>
 </body>
</html>

・bootstrap.js

import("./src/index.js")
 .catch(e => console.error("Error importing `index.js`:", e));

・src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

・src/App.js

import React , { Component } from "react";
import { HashRouter as Router, Route } from 'react-router-dom';
import Top from './component/Top';
import Test from './component/Test';

//
class App extends Component {
 render() {
   return (
     <div className="App">
       <Router>
         <div>
           <Route exact path='/' component={Top}/> 
           <Route path='/test' component={Test}/> 
         </div>
       </Router>
     </div>
   );
 }
}
export default App;

・Test.js
src/component/Test.js

import React from 'react'
import * as wasm from "wasm-crud-1";
//
class Test extends React.Component {
 constructor(props) {
   super(props);
   this.state = {data: ''}
 }  
 componentDidMount(){
   wasm.greet();
 }
 render(){
   return(
     <div>
       <h1>test</h1>
       <h2>welcome, test2</h2>
     </div>
   )
 }
}

export default Test;

■ webpack 確認

・起動
npm run start

・ http://localhost:8080/#/test 、を開き。

wasm.greet();　が実行できて。
アラート表示できましたので、react + wasm 読込確認まで完了できました。

この記事が気に入ったらサポートをしてみませんか？