Win10使用Docker快速搭建WebAssembly编译环境

前言

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代码，然后直接一行命令编译就搞定