如何在浏览器端运行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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • 前言 2000年,伊利诺伊大学厄巴纳-香槟分校(University of Illinois at Urbana-...
    星光社的戴铭阅读 15,861评论 8 180
  • 编译器做些什么? 本文主要探讨一下编译器主要做些什么,以及如何有效的利用编译器。 简单的说,编译器有两个职责:把 ...
    评评分分阅读 1,117评论 1 5
  • This chapter discusses some of the design decisions that ...
    狂风无迹阅读 959评论 0 0
  • 比较麻烦,未完待续。。。。。。 VIM 配置:.vimrc以及.ycm_extra_conf.py配置 插件:个人...
    陈半仙儿阅读 16,144评论 3 26
  • 你笑了,是天使。 你哭了,是天使。 你生气了,是天使。 你睡觉了,是天使。 你很乖,是天使。 你吵闹,是需要安抚的...
    yiyi_4f59阅读 149评论 0 0