如何在React项目中直接使用WebAssembly
前言
自从入坑WebAssembly以来,躺了很多坑,也浏览了很多资料,都没有看到很多能够直接在前端项目中使用WebAssembly的例子。即使有,我自己按照介绍的步骤一步一步来,
也会报各种错误,官方的文档也写的比较模糊。于是,就决定自己撸一个,让React项目能够直接的借助Webpack,在代码中引入已经编译好的C++模块。
写一个C语言模块
int add(int a, int b) {
return a + b;
}
使用emscripten对C模块进行编译
执行以下代码对上面的add.c
文件进行编译。
emcc add.c -Os -s WASM=1 -s SIDE_MODULE=1 -o add.wasm
-Os
代码我的模块需要优化,-s WASM=1
代表我需要Wasm的第一个版本,-s SIDE_MODULE=1
代表我不需要多余的代码,就只要这一个模块。-o add.wasm
表示我的输出文件为add.wasm
。然后就可以看到在与add.c
同级的目录下生成了add.wasm
。然后把add.wasm
放到public
目录下。
新建一个react项目
npx create-react-app my-project
cd my-project
yarn install
yarn start
执行完上述的命令,一个简单的react项目就在你本地的3000端口启动了。
获取webpack控制权
然后再执行以下命令。
yarn run eject
运行之后就可以看到webpack的配置文件了。
安装loader和fetch
yarn add wasm-loader && yarn add node-fetch
更新webpack配置文件
找到webpack配置文件,在相应的位置添加如下配置。
{
test: /\.wasm$/,
type: 'javascript/auto',
loaders: ['wasm-loader']
}
修改App.js文件
修改App.js。将其替换为如下代码。
import React, {Component} from 'react';
import logo from './logo.svg';
import fetch from 'node-fetch';
import './App.css';
class App extends Component {
componentDidMount() {
this.doSomething();
}
getExportFunction = async (url) => {
const env = {
memoryBase: 0,
tableBase: 0,
memory: new WebAssembly.Memory({
initial: 256
}),
table: new WebAssembly.Table({
initial: 2,
element: 'anyfunc'
})
};
const instance = await fetch(url).then((response) => {
return response.arrayBuffer();
}).then((bytes) => {
return WebAssembly.instantiate(bytes, {env: env})
}).then((instance) => {
return instance.instance.exports;
});
return instance;
};
doSomething = async () => {
const wasmUrl = 'http://localhost:3000/add.wasm';
const { add } = await this.getExportFunction(wasmUrl);
console.log(add(200,2034));
};
render() {
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;
可以看到App类中有个函数叫getExportFunction
,这个函数接受一个url
参数,这个url是远程wasm文件的地址。然后动态的根据传入url,解析其中的编译好的function
。
运行
执行以下命令启动项目。
yarn start
然后就可以在控制台中看到输出的49,是直接调用的我们用C语言写的add函数。
举个例子
完整的项目代码在这里,欢迎Star。
如何在React项目中直接使用WebAssembly的更多相关文章
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- react项目中实现搜索关键字呈现高亮状态(一)
最近有个需求,在一个react项目中,实现搜索关键字呈现高亮状态.这个在普通的html文件中还好操作些,在react项目中有点懵逼了,因为react项目中很少操作dom,有点无从下手.但最后还是实现了 ...
- [Laravel-Swagger]如何在 Laravel 项目中使用 Swagger
如何在 Laravel 项目中使用 Swagger http://swagger.io/getting-started/ 安装依赖 swagger-php composer require zirco ...
- 如何在cocos2d项目中enable ARC
如何在cocos2d项目中enable ARC 基本思想就是不支持ARC的代码用和支持ARC的分开,通过xcode中设置编译选项,让支持和不支持ARC的代码共存. cocos2d是ios app开发中 ...
- 如何在NodeJS项目中优雅的使用ES6
如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
随机推荐
- Nvidia的CUDA库现在恢复使用了
Nvidia的CUDA库现在恢复使用了 由于早期版本存在兼容问题,从去年8月nvidia-cuda-toolkit包被移除了.现在该软件包更新后,又重新可以用,被重新添加到Kali Linux软件 ...
- centos7上PhantomJS 过期之后改用Chrome时填的坑
突然有个自动化需求所以准备使用模拟点击的方法, 在使用之前的PhantomJS时,报错 UserWarning: Selenium support for PhantomJS has been dep ...
- 1.3 正则表达式和Python语言-1.3.5使用 search()在一个字符串中查找模式(搜索与匹配 的对比)
1.3.5 使用 search()在一个字符串中查找模式(搜索与匹配的对比) 其实,想要搜索的模式出现在一个字符串中间部分的概率,远大于出现在字符串起始部分的概率.这也就是 search()派上用场的 ...
- anjular分页组件tm-pagination的使用
原组件地址:https://github.com/miaoyaoyao/AngularJs-UI (1)直接从git上clone下来的demo无法正常显示,后来重新到在线的demo上拷贝了templa ...
- RDSS和RNSS
RNSS英文全称Radio Navigation Satellite System,由用户接收卫星无线电导航信号,是一种卫星无线电导航业务,自主完成至少到4颗卫星的距离测量,进行用户位置,速度及航行参 ...
- 各个模块的刷新js
// 更新页面中的subgrid function refreshSubGrid(subgridName) { Xrm.Page.ui.controls.get(subgridName).refres ...
- windows系统dos窗口全屏
第一次进入博客园 2017年12月7日 之前使用dos窗口时都输入的是简短的指令,今天突然感觉小框看着不舒服,就找了一下度娘,在这里感谢万能的百度,一鞠躬. 1.win+r打开dos命令窗口 2.cm ...
- c#基础小练习
1.通过控制台接受输入的数字,将数字放到一维数组中,进行反转数据处理,然后将反转的数据打印到控制台应用程序里 方法一 步骤: 1.添加接收控制台输入的数据变量 2.将接收的字符串转换成一维数组 3.新 ...
- 循环结构for
教程:高能:语句结构都是由关键字开头,用冒号结束! 一:语句结构 for <variable> in <sequence>: <statements>else ...
- 2019PHP面试题最全面归纳总结
1.请选择以下代码运行的结果: <?php if ('1e3' == '1000') echo 'LOL'; ?> A 无任何输出结果 B LOL C 不执行且报错 解析:1e3 ...