Ubuntu 18.04 下 emscripten SDK 的安装

Ubuntu 18.04 下 emscripten SDK 的安装
http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html#installation-instructions

需要环境
清华安装源 https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu
$ sudo apt update
$ sudo apt install vim openssh-server git curl wget tar unzip
$ sudo apt install build-essential python cmake default-jre

下载源
$ cd ~
$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
更新最新版本
$ ./emsdk update

安装最新的SDK
安装期间会检查并自动下载缺失的llvm、clang、node、emscripten和sdk等,根据提示会显示下载的压缩包网址和本地的目录,
如果下载期间发生错误,无法下载到本地,可以用wget等工具手动下载,放到提示的本地目录(emsdk/zips)里,再次运行这条命令

当然手动下载好,然后复制到zips也是可以的
$ mkdir ~/emsdk/zips
$ mv ~/clang-e1.38.4.tar.gz ~/emsdk/zips/
$ mv ~/llvm-e1.38.4.tar.gz ~/emsdk/zips/
$ mv ~/node-v8.9.1-linux-x64.tar.xz ~/emsdk/zips/
$ mv ~/emscripten-llvm-e1.38.4.tar.gz ~/emsdk/zips/
$ mv ~/1.38.4.tar.gz ~/emsdk/zips/
$ ./emsdk install latest
$ rm ~/emsdk/zips/*

$ ./emsdk install latest
请耐心等待编译完成。
为当前用户配置~/.emscripten文件
$ ./emsdk activate latest

查看安装列表,安装binaryen
$ ./emsdk list
./emsdk install binaryen-tag-1.38.4-64bit
./emsdk activate binaryen-tag-1.38.4-64bit

为当前会话配置环境变量
$ cd ~/emsdk
$ source ./emsdk_env.sh
$ cd ~/emsdk
$ ./emsdk list

查看版本
$ emcc --version
$ em++ --version

备份
$ cd ~
$ tar cvzf emsdk.tar.gz emsdk

卸载
$ ./emsdk uninstall <tool/sdk name>
完全卸载,删除这个目录即可。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
官方教程的例子
http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

emcc 用于编译c/c++源程序,简单格式如下:
$ emcc -O2 hello_world.cpp -s WASM=1 -o hello_world.html
(1)优化方案:详细见 http://kripken.github.io/emscripten-site/docs/tools_reference/emcc.html#emcc-o2
指定 -O0 或者不指定优化方案,即不优化。
指定 -O1 简单优化,优化asm.js,LLVM -O1,移除掉运行时输出和异常捕获等,如printf、puts等代码。
指定 -O2 类似O1,然后会压缩js,LLVM -O3,适合release
指定 -O3 类似O2,进一步压缩js,推荐release
指定 -Os 类似O3,进一步优化bitcode生成和js代码尺寸
指定 -Oz 类似Os,更进一步优化代码
(2)键值开关:-s OPTION=value
默认WASM=1,如果纯js,请设置WASM=0
(3)-o xxx.html
会输出xxx.html,否则会输出a.out.js和a.out.wasm
(4)更详细的指令见 emcc --help 和 http://kripken.github.io/emscripten-site/docs/tools_reference/emcc.html

---------------------------
例子1:编译hello, world程序
---------------------------
$ source ~/emsdk/emsdk_env.sh
$ mkdir ~/tests
$ cd ~/tests
$ vim hello_world.c

 #include <stdio.h>

 int main() {
printf("hello, world!\n");
return ;
}

$ emcc hello_world.c
耐心等待,会生成a.out.js,如果发生错误,可以用-v选项编译,输出更多的调试信息。
$ ls -al
total 160
drwxrwxr-x 2 bob bob 4096 6月 1 14:37 .
drwxr-xr-x 19 bob bob 4096 6月 1 14:38 ..
-rw-rw-r-- 1 bob bob 101699 6月 1 14:37 a.out.js
-rw-rw-r-- 1 bob bob 45389 6月 1 14:37 a.out.wasm
-rw-rw-r-- 1 bob bob 75 6月 1 14:35 hello_world.c
$ node a.out.js
hello, world!

通过上面的生成文件,会发现同时生成了wasm,但是有的浏览器不支持wasm,需要指定 -s WASM=0
接下来分别生成支持wasm和不支持wasm的情况,同时生成html
$ emcc hello_world.c -o hello.html
$ emcc hello_world.c -s WASM=0 -o hello_nowasm.html
$ ls -al
total 816K
drwxrwxr-x 2 bob bob 4.0K 6月 1 14:54 .
drwxr-xr-x 19 bob bob 4.0K 6月 1 14:54 ..
-rw-rw-r-- 1 bob bob 100K 6月 1 14:37 a.out.js
-rw-rw-r-- 1 bob bob 45K 6月 1 14:37 a.out.wasm
-rw-rw-r-- 1 bob bob 101K 6月 1 14:54 hello.html
-rw-rw-r-- 1 bob bob 100K 6月 1 14:54 hello.js
-rw-rw-r-- 1 bob bob 101K 6月 1 14:54 hello_nowasm.html
-rw-rw-r-- 1 bob bob 298K 6月 1 14:54 hello_nowasm.js
-rw-rw-r-- 1 bob bob 45K 6月 1 14:54 hello.wasm
-rw-rw-r-- 1 bob bob 75 6月 1 14:35 hello_world.c
分别生成了:
第一组:hello.html, hello.js, hello.wasm
第二组:hello_nowasm.html, hello_nowasm.js
可以用一个httpserver启动,然后用浏览器测试两个页面的效果
$ python -m SimpleHTTPServer 8080
注:wasm的是不支持file:///方式直接打开。

Ubuntu 18.04 下 emscripten SDK 的安装

附:wasm的浏览器支持情况
https://caniuse.com/#search=wasm

Ubuntu 18.04 下 emscripten SDK 的安装

----------------------------
例子2:SDL API显示到<canvas>
----------------------------
$ cd ~/tests
$ vim hello_world_sdl.cpp

 #include <stdio.h>
#include <SDL/SDL.h> #ifdef __EMSCRIPTEN__
#include <emscripten.h>
#endif extern "C" int main(int argc, char** argv) {
printf("hello, world!\n"); SDL_Init(SDL_INIT_VIDEO);
SDL_Surface *screen = SDL_SetVideoMode(, , , SDL_SWSURFACE); #ifdef TEST_SDL_LOCK_OPTS
EM_ASM("SDL.defaults.copyOnLock = false; SDL.defaults.discardOnLock = true; SDL.defaults.opaqueFrontBuffer = false;");
#endif if (SDL_MUSTLOCK(screen)) SDL_LockSurface(screen);
for (int i = ; i < ; i++) {
for (int j = ; j < ; j++) {
#ifdef TEST_SDL_LOCK_OPTS
// Alpha behaves like in the browser, so write proper opaque pixels.
int alpha = ;
#else
// To emulate native behavior with blitting to screen, alpha component is ignored. Test that it is so by outputting
// data (and testing that it does get discarded)
int alpha = (i+j) % ;
#endif
*((Uint32*)screen->pixels + i * + j) = SDL_MapRGBA(screen->format, i, j, -i, alpha);
}
}
if (SDL_MUSTLOCK(screen)) SDL_UnlockSurface(screen);
SDL_Flip(screen); printf("you should see a smoothly-colored square - no sharp lines but the square borders!\n");
printf("and here is some text that should be HTML-friendly: amp: |&| double-quote: |\"| quote: |'| less-than, greater-than, html-like tags: |<cheez></cheez>|\nanother line.\n"); SDL_Quit(); return ;
}

保存后,可删除其他多余的文件
$ rm `ls|grep -v hello_world_sdl.cpp`
编译
$ emcc hello_world_sdl.cpp -o hello_sdl.html
$ ls -al
total 396
drwxrwxr-x 2 bob bob 4096 6月 1 15:40 .
drwxr-xr-x 19 bob bob 4096 6月 1 15:41 ..
-rw-rw-r-- 1 bob bob 102842 6月 1 15:40 hello_sdl.html
-rw-rw-r-- 1 bob bob 233934 6月 1 15:40 hello_sdl.js
-rw-rw-r-- 1 bob bob 46133 6月 1 15:40 hello_sdl.wasm
-rw-rw-r-- 1 bob bob 1385 6月 1 15:33 hello_world_sdl.cpp

Ubuntu 18.04 下 emscripten SDK 的安装

-------------------
例子3:文件打开操作
-------------------
$ cd ~/tests
$ rm *
$ vim hello_world_file.cpp

 #include <stdio.h>
int main() {
FILE *file = fopen("hello_world_file.txt", "rb");
if (!file) {
printf("cannot open file\n");
return ;
}
while (!feof(file)) {
char c = fgetc(file);
if (c != EOF) {
putchar(c);
}
}
fclose (file);
return ;
}

$ cat<<EOF>hello_world_file.txt
==
This data has been read from a file.
The file is readable as if it were at the same location in the filesystem, including directories, as in the local filesystem where you compiled the source.
==
EOF
$ emcc hello_world_file.cpp -o hello_file.html --preload-file hello_world_file.txt
$ ls -al
total 408
drwxrwxr-x 2 bob bob 4096 6月 1 15:53 .
drwxr-xr-x 19 bob bob 4096 6月 1 15:53 ..
-rw-rw-r-- 1 bob bob 199 6月 1 15:53 hello_file.data
-rw-rw-r-- 1 bob bob 102843 6月 1 15:53 hello_file.html
-rw-rw-r-- 1 bob bob 234871 6月 1 15:53 hello_file.js
-rw-rw-r-- 1 bob bob 50317 6月 1 15:53 hello_file.wasm
-rw-rw-r-- 1 bob bob 280 6月 1 15:52 hello_world_file.cpp
-rw-rw-r-- 1 bob bob 199 6月 1 15:53 hello_world_file.txt
注意那个.data文件,查看文件内容就是hello_world_file.txt的内容
$ cat hello_file.data
==
This data has been read from a file.
The file is readable as if it were at the same location in the filesystem, including directories, as in the local filesystem where you compiled the source.
==

Ubuntu 18.04 下 emscripten SDK 的安装

上一篇:C#进阶系列——WebApi 接口测试工具:WebApiTestClient


下一篇:Java获取list集合的前几个元素