Emscripten 安装

本文总阅读量次

Emscripten编译器，是WebAssembly开发的重要工具之一，主要是通过emcc（Emscripten Compiler Frontend）来工作的。这是个命令行工具。

1、

#include <stdio.h>

int main(){

printf(“Hello World\n”);

}

2、

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

3、

emrun –no_browser –port 8070 w.html

4、

http://localhost:8070/w.html

WebAssembly？

1，WebAssembly是由Google、Microsoft、Mozilla、Apple 等几家大公司合作发起的一个关于面向Web的通用二进制和文本格式的项目。WebAssembly 是除了JavaScript 以外，另一种可以在网页中运行的编程语言。

2，WebAssembly（缩写WASM）是一种新的字节码格式。并且被设计为多种编程语言（如C、Rust）目标文件格式，以.wasm 为文件名后缀。WASM通过LLVM（Low Level Virtual Machine、底层虚拟机）工具链支持多种编程语言。

3，WebAssembly初期目标是浏览器内应用程序的高性能执行引擎，随着WASM 在开发者社区中越来越流行，WASM 也正在从客户端迁移到服务端，成为服务端技术的新锐。

WebAssembly 可以用C 语言或者Rust 开发，再编译成.was文件（WebAssembly文件），还可以利用TypeScript开发，再编译成.was文件。

简单地说，WebAssembly 是一种可以使用非JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。

一）前提准备

python Git

二）安装Emscripten 编译器(emcc)

1.克隆emsdk git clone https://github.com/juj/emsdk.git

2.进入emsdk文件夹 cd emsdk

3.更新emsdk 这里使用是git所以运行时会提示使用”git pull” emsdk update git pull

4.安装最新的emsdk 并配置全局的环境变量 emsdk install –global latest

5.激活 emsdk activate latest

6.应用环境变量 emsdk_env.bat

1、建立安装目录在cmd中mkdir d:\WebAssemblyTest

2、克隆emsdk仓库到目录在cmd中输入git clone https://github.com/juj/emsdk.git，克隆emsdk仓库，参见下图：

img

3、切换到emsdk文件夹更新emsdk，确保是最新版

cd emsdk

emsdk.bat update

img

这里使用的是git，所以运行时会提示使用”git pull”

img

4、安装，注意这一步比较容易出问题，请保持耐心。对这一步，建议新手先看完整，再进行实践。

在cmd中运行emsdk.bat install latest

经验证，这一步一般进行不下去，自动下载安装期间几乎百分百出错：

Error: Downloading URL ‘…node-v12.9.1-win-x64.zip…’: <urlopen error [Errno 10060] >

Installation failed!

解决办法:

根据提示，将上网搜索下载需要的.zip文件，放入emsdk目录中的zips目录

再次运行emsdk.bat install latest

我在测试时发现，在git bush中运行emsdk.py install latest，比在cmd中运行emsdk.bat install latest，建议使用git bush，下面演示就是用它。

使用git bush打开git控制台窗口，参见下图：

img

其中$是git bush的提示符，在提示符后输入

d:/WebAssemblyTest/emsdk/emsdk.py install latest 回车（即按下Enter键）

注意，其中emsdk.py必须带后缀.py 前面的路径根据你的实际情况而定。

如果你已切换到d:/WebAssemblyTest/emsdk路径，命令前的路径就不需要了，可在$提示符后输入emsdk.py install latest 回车（即按下Enter键）

【提示：在git bush中和在cmd中，切换到其他盘符的cd命令，不同之处：

cmd中需要/d，如cd /dd:/WebAssemblyTest/emsdk

git bush中不需要/d，如cd d:/WebAssemblyTest/emsdk 】

在安装过程中如果下载报错提示如：

Installing tool ‘java-8.152-64bit’..

Error: Downloading URL ‘https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/portable_jre_8_update_152_64bit.zip': <urlopen error [Errno 10060] >

Installation failed!

注意其中的portable_jre_8_update_152_64bit.zip，你可到网上下载之

看emsdk目录中是否有zips目录若无可手动建立，将上网搜索下载的portable_jre_8_update_152_64bit.zip放入zips目录中（不用解压）。

关闭git bush，重新打开，在$提示符后再次输入

d:/WebAssemblyTest/emsdk/emsdk.py install latest

请耐心等待

已安装好的会自动跳过，参见下图：

img

请耐心等待一段时间。每次下载报错一次就用重复一次，直至成功完成，参见下图：

img

5、激活sdk包

在git bush中（也可以在cmd中），输入

d:/WebAssemblyTest/emsdk/emsdk.py activate latest

提示：前面的路径根据你的实际情况而定。

请耐心等待完成，参见下图：

img

6、设置环境变量

在cmd中，如下输入，：

d:/WebAssemblyTest/emsdk/emsdk_env.bat

提示：前面的路径根据你的实际情况而定。

参见下图：

img

提示、你可以手动配置环境变量，在系统变量path中加上（上图PATH +=后面的部分），否则每次打开cmd窗口使用emcc都要运行一次d:/WebAssemblyTest/emsdk/emsdk_env.bat

7、验证

emcc -v不报错就成功了，参见下图：

img

获取帮助

emcc –help

例子

建立一个名为文件hello_world.c ，内容如下：

#include <stdio.h>

int main(int argc, char ** argv) {

printf(“Hello World\n”);

}

保存到D:\WebAssemblyTest中

编译命令简要格式：

emcc c _file -o ou t_file

其中emcc就是Emscripten编译器行命令，c_file 如test.c是我们的输入文件，使用-o选项可以指定输出文件，out_file 如test.wasm、test.js、test.html，是我们的输出文件。

关于out_file 注意两点：1）out_file可以带路径。2）若为-o test.wasm，则只生成test.wasm这个文件；若为-o test.js，则生成test.js文件，还有test.wasm；若为-o test.html，则生成test.html文件，还有test.js和test.wasm。

编译上面的例子

在cmd中输入emcc D:\WebAssemblyTest\hello_world.c -s WASM=1 -o D:\WebAssemblyTest\hello_world.html

参见下图：

img

编译结果是这样的：

img

注意、hello_world.html不能用浏览器直接打开，否则报错，需要先启动http服务。

启动http服务命令

在cmd中输入emrun –no_browser –port 8080 D:\WebAssemblyTest\hello_world.html

注意后面要加参数为具体的hello_world.html文件路径，参见下图：

img

然后启动edge浏览器，在地址栏输入

http://localhost:8080/test.html

访问结果是这样的：

img

再看看浏览器控制台的输出：

img

再举一例

①建立一个名为文件test.c ，内容如下：

char* toChar (char* str) {

​ return str;

}

int add (int x, int y) {

return x + y;

}

int square (int x) {

return x * x;

}

保存到D:\WebAssemblyTest中

②设置环境变量

cmd窗口运行d:/WebAssemblyTest/emsdk/emsdk_env.bat

提示：前面的路径根据你的实际情况而定。

③编译上面的例子

在cmd中输入

emcc D:\WebAssemblyTest\test.c -Os -s WASM=1 -s SIDE_MODULE=1 -o D:\WebAssemblyTest\test.wasm

注意、本例和前例不同，使用了优化选项，并仅输出.wasm文件（这里是test.wasm）。

④新建test.html加入调用上面产生的test.wasm：

 

Document

注意，将test.html放在test.wasm所在目录中。不要用浏览器直接打开test.html，要按下面的介绍进行。

⑤启动http服务

emrun –no_browser –port 8080 D:\WebAssemblyTest\test.html

参见下图：

img

⑥然后启动edge浏览器，在地址栏输入

http://localhost:8080/test.html

访问结果是这样的：

img