Emscripten简介及初体验

文章目录

1. Emscripten简介
- 1.1 诞生背景
- 1.2 什么是Emscripten
2. 安装Emscripten
- 2.1 前置条件
- 2.2 下载安装过程
3. 示例
4. 参考资料

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/