Emscripten教程之入门指导

翻译:云荒杯倾
本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏。
也可以去作者的博客阅读文章。
欢迎加入Wasm和emscripten技术交流群,群聊号码:939206522。

下面是正文:

如果只是想要入门Emscripten的话,使用Emscripten是非常简单的。本教学将教会你从命令行编译Emscripten代码的种种步骤,以及Emscripten代码中怎样使用文件和使用主要的编译优化flag。

要事优先

首先是确保你已经下载并且安装好了Emscripten。根据你的操作系统不同,下载和安装过程稍有不同。

Emscripten主要是通过emcc(Emscripten Compiler Frontend)来工作的。这是个命令行工具,它会调用其他编译需要的工具,可以将它看成是标准编译器比如gcc或者clang的命令行版本。wimdows系统的话,命令行中使用emcc,Linux下使用./emcc。

验证Emscripten

第一次使用Emscripten,请先使用以下命令验证Emscripten是否正确安装:

emcc -v

如果有警告发生,可能是因为缺少一些工具,请去看这个链接解决
如果没有警告或报错,就往下看。

运行Emscripten

现在就可以使用Emscripten把C/C++代码编译成JavaScript了。

首先,写一个待编译为JavaScript的C文件。比如hello_world.c,像下面这样:

    #include <stdio.h>
    
    int main() {
      printf("hello, world!\n");
      return 0;
    }

注:这是Emscripten提供的测试集中最简单的一个C文件。

为了编译这个C文件,你只需要在test目录下打开命令行,emcc后面跟上这个文件名就行了。

emcc tests/hello_world.c

注:test目录是Emscripten测试集的目录。

这样就会在test目录下生成一个a.out.js文件,你可以使用node运行这个a.out.js。

node a.out.js

就会在node控制台打印出hello world!了。

如果编译失败,你可以在emcc tests/hello_world.c后面加个-v,也就是变成emcc tests/hello_world.c -v ,这样呢就会有一些调试信息,你可以参考他们,找出编译失败的原因。

生成HTML

Emscripten能为刚才输出的那个JavaScript生成HTML文件,你可以使用-o命令指定要输出的html文件名。

emcc tests/hello_world.c -o hello.html

在浏览器打开这个hello.html。你会看到,这个HTML页面中有一块文本区域是为了显示C代码中printf()函数打印的内容。

实际上,这块区域不仅可以显示文本。如果你C代码中调用了SDL的API,那么也可以在一块canvas中显示一个五彩斑斓的cube。比如,hello_world_cube.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(256, 256, 32, 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 = 0; i < 256; i++) {
    for (int j = 0; j < 256; j++) {
#ifdef TEST_SDL_LOCK_OPTS
      // Alpha behaves like in the browser, so write proper opaque pixels.
      int alpha = 255;
#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) % 255;
#endif
      *((Uint32*)screen->pixels + i * 256 + j) = SDL_MapRGBA(screen->format, i, j, 255-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 0;
}

使用文件

C/C++中,可以用libc库的fopen,fclose等API来访问文件

js运行在浏览器的沙盒环境中,并不能直接访问本地文件系统,不过,Emscripten模拟了一个文件系统,这样你可以在你的C/C++代码中继续使用libc的API。

你想访问的文件应该通过preload或者embedded的方式打包到Emscripten虚拟的文件系统中。

测试集中,hello_world_file.cpp展示了怎么加载一个文件。测试代码和测试文件hello_world_file.txt如下面所示:

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

下面命令是在任何编译代码运行前指定一个数据文件预加载到Emscripten的虚拟文件系统。这个方法很有用,因为浏览器只能异步获取数据的,而原生代码(C/C++)很多都是使用的同步文件API,那么,用这个方法可以确保数据加载完成之前,编译代码(C/C++编译之后的js)不会从Emscripten的虚拟文件系统中去取数据,也就不会出错。下面是编译命令:

./emcc tests/hello_world_file.cpp -o hello.html --preload-file tests/hello_world_file.txt

运行生成的HTML,就能看到hello_world_file.txt文件的内容。

优化代码

默认情况下,和gcc以及clang等编译器一样,Emscripten生成的编译代码没有经过编译优化。那么,你可以在命令行参数中使用-O1,生成轻微优化的代码。

./emcc -O1 tests/hello_world.cpp

因为编译生成a.out.js的过程实际上并不真的需要优化,所以实际上你加不加-O1,从编译时间(或者说编译速度)上,你是看不出区别的。

但是真的没区别吗?

你可以看看生成的a.out.js文件,就能发现还是有区别的。-O1的优化有一些微小的优化并且清除了一些运行时断言,比如,在生成的代码中,printf函数,会被替换成put。

想编译优化,不仅可以用-O1,还可以用-O2,-O2优化的程度更厉害。你可以试一下,它的编译代码跟-O1又有很大差别。

Emscripten 测试集

Emscripten给大家提供了非常多的测试用例,几乎覆盖了Emscripten的所有功能。对于开发者来说,这是非常好的资源。

关于测试集的更多情况,可以点击了解

小贴士和下一步

本教学告诉了你使用Emscripten的第一步,就是使用命令行编译一个c/c++代码为js或者HTML。为了了解更多Emscripten,给你几个小贴士:

  • 本站点还有很多高级一点的教程,比如,关于编译和构建一个项目,整合你的原生代码到web环境,打包你的代码等。
  • 关于怎么用Emscripten,测试集是一个很好的参考的地方。比如你想了解–pre-js选项怎么工作,你就在测试集里面搜–pre-js,通常来说你会搜到好几个例子。
  • 读一下本站的settings.js、emcc和emscripten.h的部分。
  • 读一下本站的FAQ。

Emscripten主题系列文章是emscripten中文站点的一部分内容。
第一个主题介绍代码可移植性与限制
第二个主题介绍Emscripten的运行时环境
第三个主题第一篇文章介绍连接C++和JavaScript
第三个主题第二篇文章介绍embind
第四个主题介绍文件和文件系统
第六个主题介绍Emscripten如何调试代码

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