Webassembly Simple Guide---translation

Developer Guide

This page provides step-by-step instructions to compile a simple program into webassembly

Prerequisite Requirements

In order to compile into webassembly, some tools need to be installed in advance:

• Git. Git is already on Linux and OSX, and you need to install Git for Windows under Windows
• CMake. Under Linux and OSX can use package management tools like Apt-get or brew to install, download CMake installer under Windows;
• The compilation tool. Install GCC under Linux and install Xcode under OSX. Install Visual Studio Community with Update 3 or later under Windows;
• python2.7.x. In Linux and OSX most of the built-in Python2.7 version, no need to install, Windows need to automatically download the installation;

After installation, make sure that Git,cmake,python is accessible (otherwise add environment variables manually); Technically, if you use an early-compiled toolchain, the CMake and compilation tools are not required, but the development options may be limited.

Download or compile Toolchain

A pre-compiled toolchain is readily available on GitHub lines to compile D/C + + webassembly

$ git clone https://github.com/juj/emsdk.git$ cd emsdk$ ./emsdk install latest$ ./emsdk activate latest

The Emscripten SDK can also be used to build if you can't get the precompiled Emscripten Toolchain in the Linux release version of the operating system, or if you want to build all the toolchain from the source. Here are the steps to do it:

$ git clone https://github.com/juj/emsdk.git$ cd emsdk$ ./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit$ ./emsdk activate --build=Release sdk-incoming-64bit binaryen-master-64bit

After the H these steps, the installation is complete. After downloading the precompiled toolchain or after you build it yourself, add the Emscripten compilation environment to the current shell environment and enter:

$ source ./emsdk_env.sh --build=Release

This command adds the relevant environment variables and directories to path, making it easy for the current terminal to find the compilation tool.

Replace all of the above commands in Windows ./emsdk emsdk with the source ./emsdk_env.sh emsdk_env .

If you are using Visual Studio 2017, emsdk install add a parameter after the command--vs2017

Compile and execute a simple program

Now there is a complete toolchain to compile the simple program for webassembly. But here are a few more notes:

• The options you need to use emcc -s WASM=1 . Otherwise emcc , the default compilation is Asm.js;
• If you want to enable Emscripten to generate executable HTML files in addition to the wasm binaries and JavaScript wrapper files, you need to specify an .html output file at the end;
• Finally, the HTML file cannot be easily opened in the browser via the FILE://protocol because file it is not allowed to cross-source requests in the Protocol and requires an HTTP service to open the file.

The following command creates and compiles a simple "Hello World" program:

$ mkdir hello$ cd hello$ touch hello.c$ echo '#include <stdio.h> int main(int argc, char ** argv) {  printf("Hello world!");}' > hello.c$ emcc hello.c -s WASM=1 -o hello.html

You can emrun provide an HTTP service by G through the Emscript SDK:

$ emrun --no_browser --port 8000 ./

When the HTTP service is running, it can be opened from the browser with the address: http://localhost:8000/hello.html, if you see "Hello world!" in the Emscripten console, So congratulations on your successful compilation webassembly!

A little thought

For office, the preferred windows or OSX, but OSX is too expensive, so Windows is still quite a lot of, I encountered a lot of tools used under Windows rely on Visual Studio, but Visual Studio is too cumbersome, I particularly dislike, then met the WSL Windows subsystem, in which can install several Linux systems, with a particularly smooth, more useful than the virtual machine, I think this Microsoft This feature is particularly great.

webassembly file loading often webassembly because MIME is not a wasm type and cannot compile the problem, you can see your server software has application/wasm type.

Nginx Configuration MIME Type

Find the Nginx configuration file in the directory, my /etc/nginx/ under, there is a mime.types file, in order not to mess with the sorting structure, find application/v**** and application/x**** configuration items in the middle plus a row application/wasm wasm; , Restart Nginx after savingsystemctl restart nginx

// 配置后的一部分内容..................application/vnd.google-earth.kmz   kmz;application/wasm                   wasm;application/x-7z-compressed        7z;....................

Use curl -I url the header information to view the server response.

Webassembly Simple Guide---translation