如何在浏览器端运行c/c++语言编写的代码

安装依赖

Node.js(0.8 or above; 0.10.17 or above to run websocket-using servers in node):


Python2.x (2.7.3 or above preferred)


Java(1.6.0_31 or later). Java is optional. It is required to use theClosure Compiler(in order to minify your code).


Gitclient. Git is required if building tools from source.


Fastcomp(Emscripten’s fork of LLVM and Clang)

参考链接地址:Manually Building Emscripten on Mac OS X

To build the Fastcomp code from source:

Create a directory to store the build. It doesn’t matter where, because Emscripten gets the information from thecompiler configuration file (~/.emscripten). We show how to update this file later in these instructions:

mkdirmyfastcompcdmyfastcomp

Clone the fastcomp LLVM repository (https://github.com/kripken/emscripten-fastcomp):

gitclonehttps://github.com/kripken/emscripten-fastcomp

Clone thekripken/emscripten-fastcomp-clangrepository intoemscripten-fastcomp/tools/clang:

cdemscripten-fastcompgitclonehttps://github.com/kripken/emscripten-fastcomp-clang tools/clang

Warning

Youmustclone it into a directory namedclangas shown, so thatClangis present intools/clang!

Create abuilddirectory (inside theemscripten-fastcompdirectory) and then navigate into it:

mkdirbuildcdbuild

Configure the build usingeithercmakeor theconfigurescript:

Usingcmake:

cmake..-DCMAKE_BUILD_TYPE=Release-DLLVM_TARGETS_TO_BUILD="X86;JSBackend"-DLLVM_INCLUDE_EXAMPLES=OFF-DLLVM_INCLUDE_TESTS=OFF-DCLANG_INCLUDE_EXAMPLES=OFF-DCLANG_INCLUDE_TESTS=OFF

Note

On Windows add the-G"VisualStudio10Win64"directive to build using Visual Studio (Visual Studio 2011 and 2012 do NOT work).

Usingconfigure(Linux/Mac only):

../configure--enable-optimized--disable-assertions--enable-targets=host,js

Determine the number of available cores on your system (Emscripten can run many operations in parallel, so using more cores may have a significant impact on compilation time):

On Mac OS X you can get the number of cores using:Apple menu | About this mac | More info | System report. TheHardware overviewon the resulting dialog includes aTotal number of coresentry.

On Linux you can find the number of cores by entering the following command on the terminal:cat/proc/cpuinfo|grep"^cpucores"|uniq.

On Windows the number of cores is listed on theTask Manager | Performance Tab. You can open theTask Managerby enteringCtrl + Shift + Escfrom the Desktop.

Callmaketo build the sources, specifying the number of available cores:

make-j4

Note

If the build completes successfully,clang,clang++, and a number of other files will be created in the release directory (/build/Release/bin).

The final step is to update the~/.emscriptenfile, specifying the location offastcompin theLLVM_ROOTvariable.

Note

If you’re building thewholeof Emscripten from source, following the platform-specific instructions inBuilding Emscripten from Source, you won’t yet have Emscripten installed. In this case, skip this step and return to those instructions.

If you already have an Emscripten environment (for example if you’re building Fastcomp using the SDK), then setLLVM_ROOTto the location of theclangbinary under thebuilddirectory. This will be something like/build/Release/binor/build/bin:

```

vim ~/.emscripten

```

修改 LLVM_ROOT到指定的文件目录

LLVM_ROOT = '/usr/local/myfastcomp/emscripten-fastcomp/build/bin' # directory

TheEmscripten code, from GitHub

clone emscripten项目到本地

```

git clone https://github.com/kripken/emscripten

cd emscripten

npm install

```

测试是否各依赖环境已经正确安装成功

在emscripten目录下运行

```

./emcc tests/hello_world.cpp


```

如果没有报错则会在同目录下找到一个新文件a.out.js

现在可以通过nodejs来运行a.out.js这个文件了

```

node a.out.js

```

会在控制台打印出

```

hello, world!

```

通过browserify编译使之能在浏览器运行

安装browserify

```

sudo npm install browserify -g

```

编译a.out.js文件

```

browserify a.out.js > test.js

```

现在可以在网页中引入test.js文件

```

<script src='test.js'></script>

```

打开控制台可以看到

```

hello world

```

可以在输出的时候直接指定声称为浏览器端运行的代码,

./emcc tests/hello_world.cpp -o test.html


在js中调用c++/c写的函数

Module.ccap("function_name", return_type, arg_type, arg)


使用emscritpen输入代码优化

./emcc tests/hello-test.cpp -o function.js

代码是通过指定优化的优化参数运行时,EMCC。级别包括:-O0(不优化),-O1,-O2,-Os,-OZ和-O3

添加setting

-s EXPORTED_FUNCTIONS="['_uncompress']"  //到处函数

-s  NO_FILESYSTEM=1      //0 在代码中包含文件系统代码, 1在代码中不包含文件系统代码

-s EXPORTED_RUNTIME_METHODS    //到处可以在模块中使用的函数

[

'FS_createFolder',

'FS_createPath',

'FS_createDataFile',

'FS_createPreloadedFile',

'FS_createLazyFile',

'FS_createLink',

'FS_createDevice',

'FS_unlink',

'Runtime',

'ccall',

'cwrap',

'setValue',

'getValue',

'ALLOC_NORMAL',

'ALLOC_STACK',

'ALLOC_STATIC',

'ALLOC_DYNAMIC',

'ALLOC_NONE',

'allocate',

'getMemory',

'Pointer_stringify',

'AsciiToString',

'stringToAscii',

'UTF8ArrayToString',

'UTF8ToString',

'stringToUTF8Array',

'stringToUTF8',

'lengthBytesUTF8',

'stackTrace',

'addOnPreRun',

'addOnInit',

'addOnPreMain',

'addOnExit',

'addOnPostRun',

'intArrayFromString',

'intArrayToString',

'writeStringToMemory',

'writeArrayToMemory',

'writeAsciiToMemory',

'addRunDependency',

'removeRunDependency',

];

Building Projects

编译多个c++/c文件到一个js中

# Sub-optimal - JavaScript optimizations are omitted

./emcc -O2 a.cpp -o a.bc

./emcc -O2 b.cpp -o b.bc

./emcc a.bc b.bc -o project.js

# Sub-optimal - LLVM optimizations omitted

./emcc a.cpp -o a.bc

./emcc b.cpp -o b.bc

./emcc -O2 a.bc b.bc -o project.js

# Broken! Different JavaScript and LLVM optimisations used.

./emcc -O1 a.cpp -o a.bc

./emcc -O2 b.cpp -o b.bc

./emcc -O3 a.bc b.bc -o project.js

# Correct. The SAME LLVM and JavaScript options are provided at both levels.

./emcc -O2 a.cpp -o a.bc

./emcc -O2 b.cpp -o b.bc

./emcc -O2 a.bc b.bc -o project.js

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 2000年,伊利诺伊大学厄巴纳-香槟分校(University of Illinois at Urbana-...
    星光社的戴铭阅读 16,048评论 8 180
  • 编译器做些什么? 本文主要探讨一下编译器主要做些什么,以及如何有效的利用编译器。 简单的说,编译器有两个职责:把 ...
    评评分分阅读 1,175评论 1 5
  • This chapter discusses some of the design decisions that ...
    狂风无迹阅读 1,017评论 0 0
  • 你笑了,是天使。 你哭了,是天使。 你生气了,是天使。 你睡觉了,是天使。 你很乖,是天使。 你吵闹,是需要安抚的...
    yiyi_4f59阅读 156评论 0 0
  • 我是一个爱折腾,爱听故事,爱享受的90后
    喵大爷阅读 319评论 0 0