在Win10 上配置 WebAssembly 编译环境

官方的指南

Webassembly编译要靠Emscripten SDK这个工具。这是官方的中文安装指南。实际上英文的安装指南更新些也更靠谱些。

实际安装

前置条件

• git 安装，资料很多，不啰嗦；
• CMake 安装指南说要装，实际上对于win10不需要；
• ptyon 2.7， 中文指南上说的已经是明日黄花，要装3.6或更新的版本。对于win10来说，只要在左下角的放大镜里面输入python, 最新版的python就可以从microsoft store中安装，很简单；
• 系统编译工具。我安装了visual studio 2017 community，这个比较好找，也是免费的。

编译Emscripten

真正的挑战在这里。

• 首先要下载Emscripten SDK
  要用git clone 命令， 这个大家一定都很熟悉。
• 然后要运行三行命令
  按官网给出的是linux中的三行代码，windows中每行代码都要稍微改变。我这里用的是power shell Win10上自带的。这样只要改下最后一行代码就行了。

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
# linux source ./emsdk_env.sh 
# on windows change to 
./emsdk_env.bat

编译Emscripten遇到的问题

编译开始比较顺利，

Skipped installing node-12.18.1-64bit, already installed.
Skipped installing python-3.7.4-pywin32-64bit, already installed.
Skipped installing java-8.152-64bit, already installed.

这三个模块很顺利的就装上了。
然后卡在

 Running post-install step: npm ci ...

停了一个小时，最后了出错退出。
查了资料，按照JiXiaoHua前辈的意见，应该直接用离线安装算了。但是离线包年代太久远，还是python2.7。算了，再忍忍向前攻一下。
查资料发现问题可能是npm 国内第三方包的速度极慢的问题，于是采用淘宝NPM镜像。为了保险起见，将本机上原来安装的node.js卸掉。直接用emsdk中的node.js包。这个目录在本机上的地址是emsdk\node\12.18.1_64bit\bin。 把这个位置的地址加入环境变量。然后：

$npm config set registry http://registry.npm.taobao.org

接着安装过程走完了

Running post-install step: npm ci ...
Running post-install step: npm install google-closure-compiler-windows

然后提示

Done installing SDK 'sdk-releases-upstream-4764c5c323a474f7ba28ae991b0c9024fccca43c-64bit'.

测试webAssembly是否能用？

编译例子

按照官网上的例子在D:\hello 文件夹中写个C代码。

#include <stdio.h>
int main(int argc, char ** argv) {
    printf("Hello World\n");
}

然后把emcc 所在的路径 emsdk\upstream\emscripten加入环境变量。
利用power shell 进入hello文件夹：

emcc hello.c -s WASM=1 -o hello.html

这时，文件夹中应该有hello.c, hello.js ,hello.wasm ,hello.html四个文件。

运行测试

按照指南上的说法，直接打开hello.html文件时webAssembly不会启动，必须在服务器中运行webAssembly才能起作用。这里首先把hello.html 文件名改成了index.html
利用powershell按指南中使用的emrun指令

PS C:\Users\dell> emrun --no_browser --port 8080 D:\hello\index.html

然后在浏览器中打开 http://localhost:8080/
记得浏览器要开webAssembly功能

• 对于Chrome，打开chrome://flags/#enable-webassembly，启用该标记。
• 对于Firefox，打开about:config，然后设置javascript.options.wasm配置项的值为true。
  出现下图：
  证明可以用了。