前言
WebAssembly听说可以极大提升js效率,因此早就想要尝试一番
首先看看官方网站:WebAssembly官方网站,想要编译成wasm,首先需要先编译 LLVM,编译LLVM的前置条件
1、工具安装(git,cmake,vs2015,python2.7.x)
2、emsdk构建
如果你根本不想关心这些流程,不想装这一大波软件,不想配置各种环境变量,只想写C++,然后直接生成wasm,那就可以继续往下看了
安装DockerDesktop
1、下载地址:https://www.docker.com/products/docker-desktop
2、安装就是直接下一步直到完成
3、安装成功后在win的cmd执行docker命令,有输出就表示安装对了
启动DockerDesktop
1、双击启动,第一次进入应该会有新手引导,随便搞完就行,然后会看到界面
2、这里需要了解Docker的基础知识,自行百度
3、左侧的Containers/Apps就是所有的容器列表,Images就是镜像,其他的我这边版本看不到,没研究过~
4、如果是第一次安装,Images里面应该是空的
拉取以及实例化镜像
1、emscripten官方已经提供了docker镜像,点击查看:官方docker镜像地址
2、打开cmd,输入命令:dokcer pull emscripten/emsdk:latest
3、这个镜像有1.4G左右,剩下的就看网速以及等待完成了
4、完成后,docker的images里面就有这个镜像了
5、实例化镜像:点击镜像右边的RUN按钮,打开选项窗口
注意,HostPath和ContainerPath需要添加自己的地址,不要留空,否则你都不知道挂载到哪里去了,后续要在主机和容器之间文件共享就无法操作了
ContainerName:随便填
HostPath:主机路径,就是windows的文件夹路径,我这里是E:\webassembly\docker_emcc_root,并且在该目录下新建了test文件夹,文件夹下有helloworld.cpp文件,挂载成功后,即可在容器cli中直接看到并操作
ContainerPath:容器路径,这个容器路径就是linux系统的文件系统路径,他的根表示为/,我这里使用的是/usr/docker_emmcc_root
都填好后,点击RUN按钮,这个时候在DockerDesktop的Containers/Apps里就有我们刚刚实例化的镜像了
操作容器
1、点击【容器】右侧的CLI按钮,打开容器命令行操作工具(bash)
2、默认打开的目录,不在容器系统根目录,而是在/src下面
而我们主机目录对应的容器在/usr/docker_emcc_root下面,所以需要cd到这个目录下(pwd命令是查看当前路径,ls是查看当前目录的内容)
可以看到容器的/usr下有我们挂载的docker_emcc_root,并且下面也有test目录和helloworld.cpp文件(helloworld.js和hellowrold.wasm是后续执行emcc编译出来的),这个和我们windows对应的目录内容是一样的
3、因为helloworld.cpp我们已经写好了,就是输出个helloworld
#include
int main(){
std::cout << "Hello World!!!!!" << std::endl;
return 0;
}
这个时候可以直接在容器的cli输入命令进行编译
emcc helloworld.cpp -o helloworld.js
如果代码没写错的话,就可以成功编译出helloworld.js和helloworld.wasm
完结
docker搭建环境,直接编译wasm流程已经跑通了,剩下的就只需要专注于撸cpp代码,然后直接一行命令编译就搞定