50

Suppose I have a simple, self-contained C++ file (math.cpp) like this: 

int add(int x, int y) {
  return x + y;
}

How would I compile it to WebAssembly (math.wasm)?

Note: I am using the Clang tool-chain.

sdgfsdh
  • 33,689
  • 26
  • 132
  • 245

6 Answers6

38

I found this gist to be very helpful.

Basically, this are the steps:

  1. (build llvm and clang 5.0.0 or above with -DLLVM_EXPERIMENTAL_TARGETS_TO_BUILD=WebAssembly)

  2. Compile the .cpp soure to llvm bitcode with clang:

    clang -emit-llvm --target=wasm32 -Oz math.cpp -c -o math.bc

  3. Compile the bitcode to s-assembly:

    llc -asm-verbose=false -o math.s math.bc

  4. Use binaryen's s2wasm tool to create a .wast file

    s2wasm math.s > math.wast

  5. Use WABT's wast2wasm tool to translate the textual .wast file into binary .wasm:

    wast2wasm -o math.wasm math.wast

Some of the steps feel redundant but I have not yet found a tool that allows shortcuts. (It would be nice if llc could compile directly to .wasm, or if s2wasm actually created binary .wasm files as the name suggests.) Anyway, once you got the toolchain running it's relatively painless. Note, however, that there are no C or C++ standard libraries for web assembly yet.

Alternatively, if you need the .wasm file just for trying out stuff you can get away without all the toolchain trouble. Browse to https://mbebenita.github.io/WasmExplorer/, paste in your C/C++ code, and download the compiled .wasm file.

Thank you @noontz and @LB-- for pointing out that

Actually as the comments in the gist suggest you can skip binaryen and compile straight to wasm from Clang/LLVM. I'm currently using the following command line for C++ : 

clang++ test.cpp -ObjC++ --compile --target=wasm32-unknown-unknown-wasm \ 
        --optimize=3 --output test.wasm
MB-F
  • 22,770
  • 4
  • 61
  • 116
  • 10
    Actually as the comments in the gist suggest you can skip binaryen and compile straight to wasm from Clang/LLVM. I'm currently using the following command line for C++ : `clang++ test.cpp -ObjC++ --compile --target=wasm32-unknown-unknown-wasm --optimize=3 --output test.wasm` – noontz Sep 04 '17 at 19:15
  • @noontz Uh, nice.. looks like it's worth to read gist comments after all ;) I will edit this into the answer if someone can independently confirm this works (or after I've managed to try it). – MB-F Sep 05 '17 at 06:01
  • I can confirm that noontz' command works to generate a .wasm file with LLVM 7, but I haven't tried running it yet. – LB-- Apr 23 '18 at 18:56
  • Thank you @LB--. I take your comment and the upvotes on noontz's as verification. Unfortunately, I have not come around to try it myself :) – MB-F Apr 23 '18 at 19:13
15

Emscripten comes with everything you will need to compile a C++ file to wasm. Emscripten also has an SDK that makes life easy when it comes to installing all the necessary tools.

By default, however, Emscripten will add some framework code to your wasm file as well as generate some html and javascript.

It is possible to create a minimal wasm file with Emscripten that doesn't include any framework code, javascript, or html. Using options -s SIDE_MODULE=1 -Oz -s ONLY_MY_CODE=1 while compiling with emcc or em++ will give you a minimal wasm file.

The following command would export a minimal wasm file using your examples and Emscripten:

em++ math.cpp -o math.wasm -Oz -s SIDE_MODULE=1 -s WASM=1 -s "EXPORTED_FUNCTIONS=['_add']" -s ONLY_MY_CODE=1

Clint
  • 2,696
  • 23
  • 42
9

As of 2019, Clang (8) supports webassembly out of the box. Here is a repository that contains everything needed to compile, link and run a simple .wasm file.

https://github.com/PetterS/clang-wasm

Petter
  • 37,121
  • 7
  • 47
  • 62
4

Currently the easiest way to compile C and C++ is with emscripten. The components you mention are all components, but emscripten is a full toolchain that supports building end-to-end, and includes all the parts you need including libc/libc++, and a variety of other useful libraries. It supports targeting both asm.js and wasm.

Derek
  • 783
  • 1
  • 4
  • 8
  • 3
    This is a good advice in general - it's much easier to build using emscripten - but not at all for this question. Emscripten will create orders of magnitude bigger file than the steps before – Karel Bílek Jul 25 '17 at 07:23
  • 2
    @KarelBílek This may have been true when this answer was posted but it is no longer. Check out my answer. – Clint Apr 06 '18 at 18:29
3

Based on the answers in this thread, I've created a little guide.

For me, the easiest way was to compile emscripten (the website is also a great starting point!) on my machine, compile the code to wasm, generate the appropriate bindings and hide all this in a wrapper on the JS-Side to that I get a nice interface.

Because of the name mangling of c++, I've found getting started with C is easier.

Thomas Deniffel
  • 153
  • 1
  • 7
2

A little late for this answer but there are beautiful tools online for compiling your scripts.

By example, I'm using this one. That one giving you minimim option of compiling (C,C++,std99...) but there are sufficient : https://wasdk.github.io/WasmFiddle/

And depending of how you gonna use it, you can choose between differents languages such as x86, code Buffer. You can also share your code, kind of functions that I find cool when you are working with some other buddy : https://wasdk.github.io/WasmFiddle/?gus9d :)

Latsuj
  • 469
  • 1
  • 5
  • 14
  • 1
    This is interesting, but not a realistic option when building entire projects. I need something that can be run locally and on a CI server. – sdgfsdh Mar 26 '18 at 08:41