摘要：歡迎加入和技術(shù)交流群，群聊號(hào)碼。下面是正文如果只是想要入門(mén)的話，使用是非常簡(jiǎn)單的。主要是通過(guò)來(lái)工作的。實(shí)際上，這塊區(qū)域不僅可以顯示文本。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，這是非常好的資源。

翻譯：云荒杯傾
本文是Emscripten-WebAssembly專(zhuān)欄系列文章之一，更多文章請(qǐng)查看專(zhuān)欄。
也可以去作者的博客閱讀文章。
歡迎加入Wasm和emscripten技術(shù)交流群，群聊號(hào)碼：939206522。

如果只是想要入門(mén)Emscripten的話，使用Emscripten是非常簡(jiǎn)單的。本教學(xué)將教會(huì)你從命令行編譯Emscripten代碼的種種步驟，以及Emscripten代碼中怎樣使用文件和使用主要的編譯優(yōu)化flag。

首先是確保你已經(jīng)下載并且安裝好了Emscripten。根據(jù)你的操作系統(tǒng)不同，下載和安裝過(guò)程稍有不同。

Emscripten主要是通過(guò)emcc（Emscripten Compiler Frontend）來(lái)工作的。這是個(gè)命令行工具，它會(huì)調(diào)用其他編譯需要的工具，可以將它看成是標(biāo)準(zhǔn)編譯器比如gcc或者clang的命令行版本。wimdows系統(tǒng)的話，命令行中使用emcc，Linux下使用./emcc。

第一次使用Emscripten，請(qǐng)先使用以下命令驗(yàn)證Emscripten是否正確安裝：

emcc -v

如果有警告發(fā)生，可能是因?yàn)槿鄙僖恍┕ぞ?，?qǐng)去看這個(gè)鏈接解決
如果沒(méi)有警告或報(bào)錯(cuò)，就往下看。

現(xiàn)在就可以使用Emscripten把C/C++代碼編譯成JavaScript了。

首先，寫(xiě)一個(gè)待編譯為JavaScript的C文件。比如hello_world.c，像下面這樣：

    #include 
    
    int main() {
      printf("hello, world!
");
      return 0;
    }

注：這是Emscripten提供的測(cè)試集中最簡(jiǎn)單的一個(gè)C文件。

為了編譯這個(gè)C文件，你只需要在test目錄下打開(kāi)命令行，emcc后面跟上這個(gè)文件名就行了。

emcc tests/hello_world.c

注：test目錄是Emscripten測(cè)試集的目錄。

這樣就會(huì)在test目錄下生成一個(gè)a.out.js文件，你可以使用node運(yùn)行這個(gè)a.out.js。

node a.out.js

就會(huì)在node控制臺(tái)打印出hello world！了。

如果編譯失敗，你可以在emcc tests/hello_world.c后面加個(gè)-v，也就是變成emcc tests/hello_world.c -v ，這樣呢就會(huì)有一些調(diào)試信息，你可以參考他們，找出編譯失敗的原因。

Emscripten能為剛才輸出的那個(gè)JavaScript生成HTML文件，你可以使用-o命令指定要輸出的html文件名。

emcc tests/hello_world.c -o hello.html

在瀏覽器打開(kāi)這個(gè)hello.html。你會(huì)看到，這個(gè)HTML頁(yè)面中有一塊文本區(qū)域是為了顯示C代碼中printf()函數(shù)打印的內(nèi)容。

實(shí)際上，這塊區(qū)域不僅可以顯示文本。如果你C代碼中調(diào)用了SDL的API，那么也可以在一塊canvas中顯示一個(gè)五彩斑斕的cube。比如，hello_world_cube.cpp那個(gè)測(cè)試用例就是這樣。那個(gè)測(cè)試用例的代碼是：

#include 
#include 

#ifdef __EMSCRIPTEN__
#include 
#endif

extern "C" int main(int argc, char** argv) {
  printf("hello, world!
");

  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!
");
  printf("and here is some text that should be HTML-friendly: amp: |&| double-quote: |"| quote: |"| less-than, greater-than, html-like tags: ||
another line.
");

  SDL_Quit();

  return 0;
}

C/C++中，可以用libc庫(kù)的fopen,fclose等API來(lái)訪問(wèn)文件

js運(yùn)行在瀏覽器的沙盒環(huán)境中，并不能直接訪問(wèn)本地文件系統(tǒng)，不過(guò)，Emscripten模擬了一個(gè)文件系統(tǒng)，這樣你可以在你的C/C++代碼中繼續(xù)使用libc的API。

你想訪問(wèn)的文件應(yīng)該通過(guò)preload或者embedded的方式打包到Emscripten虛擬的文件系統(tǒng)中。

測(cè)試集中，hello_world_file.cpp展示了怎么加載一個(gè)文件。測(cè)試代碼和測(cè)試文件hello_world_file.txt如下面所示：

    #include 
    int main() {
      FILE *file = fopen("tests/hello_world_file.txt", "rb");
      if (!file) {
        printf("cannot open file
");
        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.
    ==

下面命令是在任何編譯代碼運(yùn)行前指定一個(gè)數(shù)據(jù)文件預(yù)加載到Emscripten的虛擬文件系統(tǒng)。這個(gè)方法很有用，因?yàn)闉g覽器只能異步獲取數(shù)據(jù)的，而原生代碼（C/C++）很多都是使用的同步文件API，那么，用這個(gè)方法可以確保數(shù)據(jù)加載完成之前，編譯代碼（C/C++編譯之后的js）不會(huì)從Emscripten的虛擬文件系統(tǒng)中去取數(shù)據(jù)，也就不會(huì)出錯(cuò)。下面是編譯命令：

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

運(yùn)行生成的HTML，就能看到hello_world_file.txt文件的內(nèi)容。

默認(rèn)情況下，和gcc以及clang等編譯器一樣，Emscripten生成的編譯代碼沒(méi)有經(jīng)過(guò)編譯優(yōu)化。那么，你可以在命令行參數(shù)中使用-O1，生成輕微優(yōu)化的代碼。

./emcc -O1 tests/hello_world.cpp

因?yàn)榫幾g生成a.out.js的過(guò)程實(shí)際上并不真的需要優(yōu)化，所以實(shí)際上你加不加-O1，從編譯時(shí)間（或者說(shuō)編譯速度）上，你是看不出區(qū)別的。

但是真的沒(méi)區(qū)別嗎？

你可以看看生成的a.out.js文件，就能發(fā)現(xiàn)還是有區(qū)別的。-O1的優(yōu)化有一些微小的優(yōu)化并且清除了一些運(yùn)行時(shí)斷言，比如，在生成的代碼中，printf函數(shù)，會(huì)被替換成put。

想編譯優(yōu)化，不僅可以用-O1，還可以用-O2，-O2優(yōu)化的程度更厲害。你可以試一下，它的編譯代碼跟-O1又有很大差別。

Emscripten給大家提供了非常多的測(cè)試用例，幾乎覆蓋了Emscripten的所有功能。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，這是非常好的資源。

關(guān)于測(cè)試集的更多情況，可以點(diǎn)擊了解。

本教學(xué)告訴了你使用Emscripten的第一步，就是使用命令行編譯一個(gè)c/c++代碼為js或者HTML。為了了解更多Emscripten，給你幾個(gè)小貼士：

本站點(diǎn)還有很多高級(jí)一點(diǎn)的教程，比如，關(guān)于編譯和構(gòu)建一個(gè)項(xiàng)目，整合你的原生代碼到web環(huán)境，打包你的代碼等。

關(guān)于怎么用Emscripten，測(cè)試集是一個(gè)很好的參考的地方。比如你想了解--pre-js選項(xiàng)怎么工作，你就在測(cè)試集里面搜--pre-js，通常來(lái)說(shuō)你會(huì)搜到好幾個(gè)例子。

讀一下本站的settings.js、emcc和emscripten.h的部分。

讀一下本站的FAQ。

Emscripten主題系列文章是emscripten中文站點(diǎn)的一部分內(nèi)容。
第一個(gè)主題介紹代碼可移植性與限制
第二個(gè)主題介紹Emscripten的運(yùn)行時(shí)環(huán)境
第三個(gè)主題第一篇文章介紹連接C++和JavaScript
第三個(gè)主題第二篇文章介紹embind
第四個(gè)主題介紹文件和文件系統(tǒng)
第六個(gè)主題介紹Emscripten如何調(diào)試代碼