摘要:如何判断环境变量是否配置成功呢可以使用命令行工具在非目录下,执行,看看结果是不是类似下面如果是,那么恭喜你已经安装成功了。
javascript 这门语言的性能无法与原生的C/C++代码相媲美,为了进一步提高网页的性能,业界推出了WebAssembly技术:将C语言编译成了浏览器可以执行的wasm文件。WebAssembly不仅提高了网页的性能,而且还可以完成原来javascript无法实现的功能。
要想使用WebAssembly,就需要通过Emscripten编译器将C语言编译成wasm文件,但是官方安装教程不够细致,可能会让开发者造成困惑而导致安装失败(本宝宝就失败了好多次,所以觉得有必要写本文)。
PS:本文是windows系统Emscripten编译器安装教程
步骤一:克隆emsdk仓库# 克隆emsdk仓库,并执行安装 git clone https://github.com/juj/emsdk.git步骤二:安装
# 定位到emsdk文件夹 cd emsdk # 执行 update emsdk update # 安装各种工具 emsdk install latest
在执行emsdk install latest会下载安装很多东西,时间会有些久,最后一个需要下载的东西(emscripten-x.xx.xx.zip)是从github下载的,经常会下载失败。
好在第一次执行 emsdk install latest 成功下载并安装的东西,当你再次执行 emsdk install latest 的时候并不需要重新下载安装,所以如果你发现emscripten-x.xx.xx.zip下载失败,可以复制命令行中的下载地址,使用迅雷先下载好,按照命令行中的保存路径,事先将.zip放到那个路径下面,事情就解决了。
# 生成 ~/.emscripten 文件,激活配置 emsdk activate latest
最后,双击emsdk目录下的emsdk_env.bat文件配置环境变量,不过我虽然双击了,但是环境变量并没有被设置。如何判断环境变量是否配置成功呢?可以使用命令行工具在非emsdk目录下,执行emcc -v,看看结果是不是类似下面:
C:UsersAdministrator>emcc -v emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.37.36 clang version 5.0.0 (emscripten 1.37.36 : 1.37.36) Target: x86_64-pc-windows-msvc Thread model: posix InstalledDir: D:Applicationemsdkclange1.37.36_64bit INFO:root:(Emscripten: Running sanity checks) C:UsersAdministrator>
如果是,那么恭喜你已经安装成功了。可以忽略步骤三了。
步骤三:配置环境变量打开刚才克隆下来的emsdk文件夹,双击执行emcmdprompt.bat文件,可以看到如下内容(我把emsdk克隆到了D:Application下,所以下面有很多D:Application,实际情况以你们克隆保存目录为准):
Adding directories to PATH: PATH += D:Applicationemsdkclange1.37.36_64bit PATH += D:Applicationemsdk ode8.9.1_64bitin PATH += D:Applicationemsdkpython2.7.13.1_64bitpython-2.7.13.amd64 PATH += D:Applicationemsdkjava8.152_64bitin PATH += D:Applicationemsdkemscripten1.37.36 Setting environment variables: EMSDK = D:/Application/emsdk BINARYEN_ROOT = D:Applicationemsdkclange1.37.36_64bitinaryen JAVA_HOME = D:Applicationemsdkjava8.152_64bit EMSCRIPTEN = D:Applicationemsdkemscripten1.37.36
这堆东西用来让你配置环境变量的,右键我的电脑 -> 属性 -> 高级系统设置 -> 环境变量,在系统变量的Path值中添加:
D:Applicationemsdkclange1.37.36_64bit;D:Applicationemsdk ode8.9.1_64bitin;D:Applicationemsdkpython2.7.13.1_64bitpython-2.7.13.amd64;D:Applicationemsdkjava8.152_64bitin;D:Applicationemsdkemscripten1.37.36
新建系统变量EMSDK,值设置为D:/Application/emsdk
新建系统变量BINARYEN_ROOT,值设置为D:Applicationemsdkclange1.37.36_64bitinaryen
新建系统变量JAVA_HOME,值设置为D:Applicationemsdkjava8.152_64bit
新建系统变量EMSCRIPTEN,值设置为D:Applicationemsdkemscripten1.37.36
点击确定退出设置,尝试在其他非emsdk目录执行 emcc -v 检查是否配置成功。
步骤四:编译第一个wasm文件在其他文件夹新建一个 index.c 文件(我参考了这篇文章中代码:让C代码在浏览器中运行):
#include#include #include #include // 一旦WASM模块被加载,main()中的代码就会执行 int main(int argc, char ** argv) { printf("WebAssembly module loaded "); } // 返回1-6之间的一随机数 int EMSCRIPTEN_KEEPALIVE roll_dice() { srand ( time(NULL) ); return rand() % 6 + 1; }
然后用命令行工具定位到这个文件夹,执行:
emcc index.c -s WASM=1 -O3 -o index.js
等待片刻之后,你就能够看见生成了两个新文件:
index.js index.wasm
你可以用html引入这个index.js试试(index.wasm必须和index.js在同一路径下)
end.
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93993.html
摘要:写在前面之前做过一段时间的的研究,写过几个,并且阅读并翻译了很多篇官方文档,今天对这些东西做一个总结。主要是以链接形式提供,并附上简短的说明。欢迎加入和技术交流群,群聊号码 写在前面 之前做过一段时间的WebAssembly的研究,写过几个WebAssembly Demo,并且阅读并翻译了很多篇Emscripten官方文档,今天对这些东西做一个总结。如果有需要对这块知识了解的同学,就可...
摘要:解析下载后,需要引擎经过两个阶段转换成,然后再转换为浏览器需要的中间字节码。未来所有支持编译到字节码的编程语言,理论上都可以输出。 了解WebAssembly原理 WebAssembly是一种可以在浏览器上运行的二进制可执行格式文件。它将成为浏览器进化史上又一次革命。 自从浏览器问世以来,javascript就成为浏览器上执行程序的唯一标准,越来越多的应用程序通过javascript开...
摘要:本文以这个模块的开发过程梳理如何应用到前端工程中。注使用完成开发至少需要基础的编码能力。具体其他信息可以参考上该模块的。配置主要针对源码文件,需要添加正确的进行处理。下一篇应用到前端工程下和 前言 WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine...
摘要:欢迎加入和技术交流群,群聊号码。下面是正文如果只是想要入门的话,使用是非常简单的。主要是通过来工作的。实际上,这块区域不仅可以显示文本。对于开发者来说,这是非常好的资源。 翻译:云荒杯倾本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏。也可以去作者的博客阅读文章。欢迎加入Wasm和emscripten技术交流群,群聊号码:939206522。 下面...
阅读 2657·2021-11-11 16:54
阅读 2311·2021-10-09 09:44
阅读 2529·2019-08-30 15:54
阅读 1922·2019-08-30 11:24
阅读 1157·2019-08-29 17:03
阅读 2079·2019-08-29 16:22
阅读 2061·2019-08-29 13:11
阅读 1002·2019-08-29 12:14