demo: JS 调用 WebAssembly 编译的 .wasm
记录一下,第一次接触 webAssembly,即使有官方文档,但是我还是要记录下自己写的第一个 hello world
。
为什么会想到用 WebAssembly,因为我想在 js 项目中调用 C 写的库。当然不是我想到的,是做同一类产品的开源项目小伙伴想到的,让我们好好夸一夸他。在我还在苦看源码寻求另一种方式解决问题时,小伙伴和我说解决了,我今天也来尝试下,看着官网教程写了一个小 demo,距离真正的实现还任重道远呢~
WebAssembly 是什么?
webassembly 可以将 C / C++ 转成 JS 引擎可以运行的代码。关于来龙去脉可以看看这篇文章。
asm.js 和 Emscripten 入门教程
盗一张图
WebAssembly 环境准备
以 Windows 为例,下次有空的时候再看看 OS X,大同小异。
Git
CMake
Python 2.7.x
CMake 安装 看这一篇就够了:
Windows下CMake安装教程
Python 安装 看这一篇就够了:
Windows环境下安装Python(超详细图文版)
安装Emscripten 编译器
不要放在自己的工作目录下,这是在安装编译器,到时候可以通过 emcc 命令行工具执行相关编译操作。安装过程中我没有用 Git Bash
,也不知道是啥原因用它有些命令不会执行,可能是我本地环境有问题吧。有其他小伙伴是用它安装的。
所有命令:
git clone https://github.com/juj/emsdk.git cd emsdk emsdk.bat update // 因为使用的是 Git 所以要 pull 一下 git pull /* 据说这一步比较容易出错,但是我没有出错,如果有出错的小伙伴可以看看参考文档中的 《Windows10中Emscripten 安装详解》里面有解决办法 */ emsdk.bat install latest // 激活 Emscripten emsdk.py activate latest // 设置环境变量 emsdk_env.bat复制代码
emsdk.bat update
git pull
emsdk.bat install latest
激活 Emscripten,emsdk.py activate latest
设置环境变量 emsdk_env.bat
,每次打开命令行窗口都要执行一次。
验证是否安装成功 emcc -v
第一个 Hello World demo
随便写一段 C 的打印 hello world 的代码,然后执行以下命令,会发现生成了 3 个文件。我们用 vs code live server 插件打开 hello.html 看看,就不用自己起服务器了,就发现已经打印了 hello world。
#include <stdio.h> int main(int argc, char ** argv) { printf("Hello, world!\n") }复制代码
后续我又写了一些 demo,放入 Vue 项目中,虽然有些小波折,但是是完全 OK 的。在 Vue 项目中可以 es 模块的形式或者 commonjs 模块的形式导入都可以。大家可以自己尝试下。
因为本文栗子中都是把一段简单的代码去生成 js 和 wasm,如果是把一个库转过来还是很困难的,大家可以去了解下 github.com/emscripten-…,它把一些类库整合到了 emcc 中。我也还在摸索中。
我是“南丘啊南丘”,希望大家在平凡的日子里好好学习,热爱生活,日日是好日!
作者:绿田哈哈
链接:https://juejin.cn/post/7015863355764277255