Emscripten简介及初体验
1. Emscripten简介
1.1 诞生背景
Web 技术突飞猛进，但是有一个领域一直无法突破 ---- 游戏。
游戏的性能要求非常高，一些大型游戏连 PC 跑起来都很吃力，更不要提在浏览器的沙盒模型里跑了！但是，尽管很困难，许多开发者始终没放弃，希望让浏览器运行 3D 游戏。
2012年，Mozilla 的工程师 Alon Zakai 在研究 LLVM 编译器时突发奇想：许多 3D 游戏都是用 C / C++ 语言写的，如果能将 C / C++ 语言编译成 JavaScript 代码，它们不就能在浏览器里运行了吗？众所周知，JavaScript 的基本语法与 C 语言高度相似。
于是，他开始研究怎么才能实现这个目标，为此专门做了一个编译器项目 Emscripten。这个编译器可以将 C / C++ 代码编译成 JS 代码，但不是普通的 JS，而是一种叫做 asm.js 的 JavaScript 变体。
1.2 什么是Emscripten
Emscripten 官方是这么描述的：
Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.
翻译下来就是：
Emscripten是一个工具链，作用是通过LLVM来编译生成asm.js、WebAssembly字节码，目的是让你能够在网页中接近最快的速度运行C和C++，并且不需要任何插件。
Emscripten 是一种基于LLVM的编译器，理论上能够将任何能够生成LLVM位码的代码编译成javascript的严格子集asm.js，实际上主要用于将C/C++代码编译成asm.js。
2. 安装Emscripten
2.1 前置条件
想要编译成WebAssembly，你首先需要先编译 LLVM。这是运行后续工具的先决条件。
- Git。Linux 和 OS X 系统中好像已经默认装好了，在 Windows 上需要在这里安装 Git。
- CMake。在 Linux 和 OS X系统中，你可以使用包管理工具 apt-get 或 brew 来安装。如果是 Windows 系统，你可以点击这里。
- 系统编译工具。Linux上，安装 GCC。OS X 上，安装 Xcode。Windows 上安装 Visual Studio 2015 Community with Update 3 或更新版本。
- Python 2.7.x，在 Linux 和 OS X上，很可能已经装好了。看这里。
安装完毕后，确认 git，cmake 和 python 已经在你的环境变量里，可以使用。
2.2 下载安装过程
从源码编译安装十分麻烦，推荐安装核心的Emscripten SDK。
1、Windows环境
- 先使用如下命令下载emsdk。
# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git
# Enter that directory
cd emsdk
- 再使用如下命令安装配置Emscripten。
# Fetch the latest registry of available tools.
.\emsdk.bat update
# Download and install the latest SDK tools. Need install Python first.
.\emsdk.bat install latest
# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
.\emsdk.bat activate latest
# Activate PATH and other environment variables in the current terminal
.\emsdk_env.bat
- 使用如下命令验证Emscripten是否安装配置正确。
# Enter that directory
cd emsdk
# Activate PATH and other environment variables in the current terminal
.\emsdk_env.bat
# Verifying Emscripten
emcc.bat -v
2、Linux环境
- 先使用如下命令下载emsdk。
# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git
# Enter that directory
cd emsdk
- 再使用如下命令安装配置Emscripten。
# Fetch the latest registry of available tools.
./emsdk update
# Download and install the latest SDK tools. Need install Python first.
./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
./emsdk_env.sh
- 使用如下命令验证Emscripten是否安装配置正确。
# Enter that directory
cd emsdk
# Activate PATH and other environment variables in the current terminal
./emsdk_env.sh
# Verifying Emscripten
emcc -v
3. 示例
- 创建名为
helloworld.cpp的文件，其内容如下：
#include <stdio.h>
int main() {
printf("hello, world!\n");
return 0;
}
- 使用如下命令编译：
emcc.bat helloworld.cpp
编译后将生成a.out.js和a.out.wasm两个文件。后者是包含编译后代码的WebAssembly文件，前者是用于加载和执行后者的Javascipt文件。
- emcc是 Emscripten 的编译命令，它的用法非常简单：
# 生成 a.out.js
emcc.bat helloworld.cpp
# 生成 helloworld.js
emcc.bat helloworld.cpp -o helloworld.js
# 生成 helloworld.html 和 helloworld.js
emcc.bat helloworld.cpp -o helloworld.html
- 使用如下命令测试编译后生成的代码，将输出“hello,world!”。
node a.out.js
注：需要本地安装
NodeJS的运行环境
4. 参考资料
-
asm.js 和 Emscripten 入门教程
http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html -
Emscripten教程
https://huangwang.github.io/2018/07/15/Emscripten%E6%95%99%E7%A8%8B/