Rust Webassembly + webpack React 環境を作成 #Rust #Webassembly #javascript #React #node
■ 概要:
前の 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 読込確認まで完了できました。
この記事が気に入ったらサポートをしてみませんか?