For the record, when I first encountered webAssembly, EVEN though there was an official document, I wrote my first Hello World.

I came up with WebAssembly because I wanted to call a C-written library in a JS project. Of course, it’s not my idea, it’s my friend who is doing the same kind of open source project. Let’s give him a good compliment. In my bitter look at the source code for another way to solve the problem, partners and I said to solve, I also try today, looking at the official website tutorial wrote a small demo, distance from the real implementation is still a long way to go ~

What is WebAssembly?

Webassembly can turn C/C++ into code that the JS engine can run. Check out this article for context.

Introduction to ASM.js and Emscripten

Steal a picture

Preparations for the WebAssembly environment

Take Windows, for example, and look at OS X next time you have time.

  • Git
  • CMake
  • Python 2.7.x

CMake installation:

Windows CMake installation tutorial

Installing Python is enough:

Installing Python on Windows

Install the Emscripten compiler

Do not put it in your own working directory, this is to install the compiler, and you can use the EMCC command line tool to do the compilation. I didn’t use Git Bash during the installation process, and I don’t know why some commands won’t be executed. Maybe there is something wrong with my local environment. Some of the other guys installed it.

All commands:

Git clone https://github.com/juj/emsdk.git CD emsdk emsdk. Bat update / / because of using the git so want to pull the git pull / * it is said that this step is easy to get wrong, But I didn't make a mistake, */ emsdk.bat install latest // activate Emscripten emsdk.py activate Latest // Sets the environment variable emsdk_env.batCopy the code

emsdk.bat update

git pull emsdk.bat install latest

Activate Emscripten, emsdK.py activate latest

Set the environment variable emsdk_env.bat, which is executed each time the command line window is opened.

Verify that emCC-v is installed successfully

First Hello World demo

Write a random C code to print hello World, and then execute the following command to see that three files are generated. We can use the VS Code Live Server plugin to open hello.html and see if we can print hello World.

#include <stdio.h> int main(int argc, char ** argv) { printf("Hello, world! \n") }Copy the code

Later, I wrote some demos and put them into the Vue project. Although there were some twists and turns, they were completely OK. In a Vue project you can import as an ES module or as a CommonJS module. You can try it yourself.

Because this article is a simple code to generate JS and WASM, if it is a library over or very difficult, you can go to see github.com/emscripten-… , which integrates several libraries into EMCC. I’m still figuring it out.

Reference Documents:

WebAssembly Chinese document

Introduction to ASM.js and Emscripten

Windows CMake installation tutorial

Installing Python on Windows

Windows10 Emscripten installation details


I am “Nanqiu ah Nanqiu”, I hope you can study hard in ordinary days, love life, every day is a good day!