Emscripten编译器安装教程，亲测成功编译出第一个WebAssembly

javascript 这门语言的性能无法与原生的C/C++代码相媲美，为了进一步提高网页的性能，业界推出了WebAssembly技术：将C语言编译成了浏览器可以执行的wasm文件。WebAssembly不仅提高了网页的性能，而且还可以完成原来javascript无法实现的功能。

要想使用WebAssembly，就需要通过Emscripten编译器将C语言编译成wasm文件，但是官方安装教程不够细致，可能会让开发者造成困惑而导致安装失败（本宝宝就失败了好多次，所以觉得有必要写本文）。

PS：本文是windows系统Emscripten编译器安装教程

步骤一：克隆emsdk仓库

# 克隆emsdk仓库，并执行安装
git clone https://github.com/juj/emsdk.git

步骤二：安装

# 定位到emsdk文件夹
cd emsdk

# 执行 update
emsdk update

# 安装各种工具
emsdk install latest

在执行emsdk install latest会下载安装很多东西，时间会有些久，最后一个需要下载的东西（emscripten-x.xx.xx.zip）是从github下载的，经常会下载失败。

好在第一次执行 emsdk install latest 成功下载并安装的东西，当你再次执行 emsdk install latest 的时候并不需要重新下载安装，所以如果你发现emscripten-x.xx.xx.zip下载失败，可以复制命令行中的下载地址，使用迅雷先下载好，按照命令行中的保存路径，事先将.zip放到那个路径下面，事情就解决了。

# 生成 ~/.emscripten 文件，激活配置
emsdk activate latest

最后，双击emsdk目录下的emsdk_env.bat文件配置环境变量，不过我虽然双击了，但是环境变量并没有被设置。如何判断环境变量是否配置成功呢？可以使用命令行工具在非emsdk目录下，执行emcc -v，看看结果是不是类似下面：

C:\Users\Administrator>emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.37.36
clang version 5.0.0  (emscripten 1.37.36 : 1.37.36)
Target: x86_64-pc-windows-msvc
Thread model: posix
InstalledDir: D:\Application\emsdk\clang\e1.37.36_64bit
INFO:root:(Emscripten: Running sanity checks)

C:\Users\Administrator>

如果是，那么恭喜你已经安装成功了。可以忽略步骤三了。

步骤三：配置环境变量

打开刚才克隆下来的emsdk文件夹，双击执行emcmdprompt.bat文件，可以看到如下内容（我把emsdk克隆到了D:\Application\下，所以下面有很多D:\Application\，实际情况以你们克隆保存目录为准）：

Adding directories to PATH:
PATH += D:\Application\emsdk\clang\e1.37.36_64bit
PATH += D:\Application\emsdk\node\8.9.1_64bit\bin
PATH += D:\Application\emsdk\python\2.7.13.1_64bit\python-2.7.13.amd64
PATH += D:\Application\emsdk\java\8.152_64bit\bin
PATH += D:\Application\emsdk\emscripten\1.37.36

Setting environment variables:
EMSDK = D:/Application/emsdk
BINARYEN_ROOT = D:\Application\emsdk\clang\e1.37.36_64bit\binaryen
JAVA_HOME = D:\Application\emsdk\java\8.152_64bit
EMSCRIPTEN = D:\Application\emsdk\emscripten\1.37.36

这堆东西用来让你配置环境变量的，右键我的电脑 -> 属性 -> 高级系统设置 -> 环境变量，在系统变量的Path值中添加：

D:\Application\emsdk\clang\e1.37.36_64bit;D:\Application\emsdk\node\8.9.1_64bit\bin;D:\Application\emsdk\python\2.7.13.1_64bit\python-2.7.13.amd64;D:\Application\emsdk\java\8.152_64bit\bin;D:\Application\emsdk\emscripten\1.37.36

新建系统变量EMSDK，值设置为D:/Application/emsdk
新建系统变量BINARYEN_ROOT，值设置为D:\Application\emsdk\clang\e1.37.36_64bit\binaryen
新建系统变量JAVA_HOME，值设置为D:\Application\emsdk\java\8.152_64bit
新建系统变量EMSCRIPTEN，值设置为D:\Application\emsdk\emscripten\1.37.36

点击确定退出设置，尝试在其他非emsdk目录执行 emcc -v 检查是否配置成功。

步骤四：编译第一个wasm文件

在其他文件夹新建一个 index.c 文件（我参考了这篇文章中代码：让C代码在浏览器中运行）：

#include 
#include 
#include 
#include 
// 一旦WASM模块被加载，main()中的代码就会执行
int main(int argc, char ** argv) {
    printf("WebAssembly module loaded\n");
}
// 返回1-6之间的一随机数
int EMSCRIPTEN_KEEPALIVE roll_dice() {
    srand ( time(NULL) );
    return rand() % 6 + 1;
}

然后用命令行工具定位到这个文件夹，执行：

emcc index.c -s WASM=1 -O3 -o index.js

等待片刻之后，你就能够看见生成了两个新文件：

index.js
index.wasm

你可以用html引入这个index.js试试（index.wasm必须和index.js在同一路径下）

end.