Emscripten编译器装置教程，亲测胜利编译出第一个WebAssembly

2024年5月19日 253次阅读 来源: 6666

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 <stdio.h>
#include <stdlib.h>
#include <time.h>
#include <emscripten/emscripten.h>
// 一旦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.

    原文作者：6666
    原文地址: https://segmentfault.com/a/1190000014208777
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞